Button Style
[button class=”btn-default” size=”btn-lg” inline=”false” link=”#” ]Default[/button][button class=”btn-primary” size=”btn-lg” inline=”true” link=”#” ]Primary[/button][button class=”btn-success” size=”btn-lg” inline=”true” link=”#” ]Success[/button][button class=”btn-info” size=”btn-lg” inline=”true” link=”#” ]Info[/button][button class=”btn-warning” size=”btn-lg” inline=”true” link=”#” ]Warning[/button][button class=”btn-danger” size=”btn-lg” inline=”true” link=”#” ]Danger[/button][button class=”btn-inverse” size=”btn-lg” 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
[column_wrapper]
[column_grid_8]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.[/column_grid_8][column_grid_4] [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
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][/column_grid_4][/column_wrapper]
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]?
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.
Info Boxes
[column_wrapper][one_half][alert class=”alert-success” ]Success Box
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. [/alert][alert class=”alert-info” ]Info Box
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. [/alert][/one_half] [one_half][alert class=”alert-warning” ]Warning Box
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.[/alert][alert class=”alert-danger” ]Danger Box
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. [/alert][/one_half] [/column_wrapper]
[column_wrapper][one_half]
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][/one_half] [one_half]
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]
[/one_half] [/column_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]