This theme uses Twitter Bootstrap as a strong foundation. This also means that there are a ton of integrated features that you can make use of out of the box. To do this easily you can install the « Easy Bootstrap Shortcode » plugin. You can download the plugin here: http://wordpress.org/plugins/easy-bootstrap-shortcodes/
Below is an example of all the elements that you can use in this theme!
Progress bars
[progressbar value= »90″] [progressbar value= »50″ bartype= »progress-bar-success » barstyle= »progress-striped »] [progressbar value= »30″ bartype= »progress-bar-info » barstyle= »progress-striped active »] [progressbar value= »70″ bartype= »progress-bar-warning » barstyle= »progress-striped active »] [progressbar value= »100″ bartype= »progress-bar-danger » barstyle= »progress-striped active »]
Toggles
Accordion #1
Accordion #2
Accordion #3
Accordion #4
Tabs
[tabs class= »yourcustomclass »]
Lists
[list] [li type= »glyphicon-arrow-right »]You can make nice lists[/li] [li type= »glyphicon-arrow-right »]With this simple shortcode[/li] [li type= »glyphicon-arrow-right »]And select any glyphicon you want![/li] [/list]
Buttons
You can also use glyphicon in buttons!
Button Text Button Text Button Text
Notifications
[notification type= »alert-warning » close= »true » ]Your notification[/notification] [notification type= »alert-success » close= »true » ]Your notification[/notification] [notification type= »alert-info » close= »true » ]Your notification[/notification] [notification type= »alert-danger » close= »true » ]Your notification[/notification]
Columns
[row] [column lg= »6″ md= »12″ sm= »12″ xs= »12″ ] Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit. Donec placerat, purus sit amet tincidunt pellentesque, risus lectus tincidunt quam, sit amet imperdiet lectus erat sed mauris.[/column] [column lg= »6″ md= »12″ sm= »12″ xs= »12″ ] Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit. Donec placerat, purus sit amet tincidunt pellentesque, risus lectus tincidunt quam, sit amet imperdiet lectus erat sed mauris.
[/column] [/row]
[row] [column lg= »4″ md= »12″ sm= »12″ xs= »12″ ] Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit.
[/column] [column lg= »4″ md= »12″ sm= »12″ xs= »12″ ] Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit.
[/column] [column lg= »4″ md= »12″ sm= »12″ xs= »12″ ] Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit.
[/column] [/row]
[row] [column lg= »3″ md= »12″ sm= »12″ xs= »12″ ] Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
[/column] [column lg= »3″ md= »12″ sm= »12″ xs= »12″ ] Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
[/column] [column lg= »3″ md= »12″ sm= »12″ xs= »12″ ] Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
[/column] [column lg= »3″ md= »12″ sm= »12″ xs= »12″ ] Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
[/column] [/row]
Responsive tables
[table width = »100% » style = » table-hover » responsive = »true »] [table_head] [th_column]Heading-1[/th_column] [th_column]Heading-2[/th_column] [th_column]Heading-3[/th_column] [th_column]Heading-4[/th_column] [/table_head] [table_body] [table_row] [row_column]value-1[/row_column] [row_column]value-2[/row_column] [row_column]value-3[/row_column] [row_column]value-4[/row_column] [/table_row] [table_row] [row_column]value-1[/row_column] [row_column]value-2[/row_column] [row_column]value-3[/row_column] [row_column]value-4[/row_column] [/table_row] [table_row] [row_column]value-1[/row_column] [row_column]value-2[/row_column] [row_column]value-3[/row_column] [row_column]value-4[/row_column] [/table_row] [table_row] [row_column]value-1[/row_column] [row_column]value-2[/row_column] [row_column]value-3[/row_column] [row_column]value-4[/row_column] [/table_row] [/table_body] [/table]
Tooltips
You can use tooltips in your content to [tooltip type= »link » link= »# » tooltip= »This is a tooltip! » style= »top » ]explain[/tooltip] something. Curabitur eget leo laoreet, laoreet lorem ut, suscipit sapien. Nam ut laoreet enim. Phasellus venenatis auctor ante nec bibendum. Vivamus diam justo, mollis vel elit nec, aliquam convallis augue. Sed a faucibus nisl.
[iconheading type= »h2″ style= »glyphicon-ok » color= »#666″]Heading with fancy icons[/iconheading]
Content panels
[panel style= »panel-default »] [panel-header] My fancy content title[/panel-header] [panel-content] Curabitur nec elit sagittis, aliquam elit at, viverra dui. Mauris velit quam, ultrices at adipiscing id, dignissim non nisi. Aliquam ullamcorper placerat semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nec feugiat nisl. Maecenas pretium enim ac lectus ultrices placerat.
[/panel-content] [/panel]
Popovers
[popover title= »A title » pop_content= »Your Content » trigger= »click » style= »top » size= » » type= »btn-default » ]Click me to see the popup[/popover]
Dropdowns
[dropdown dropup= »dropdown »] [dropdownhead style= »btn-default » size= »btn-lg » split= » »] Dropdown[/dropdownhead] [dropdownbody] [dropdownitem type= »menuitem » link= »# » ]Dropdown Item #1[/dropdownitem] [dropdownitem type= »menuitem » link= »# » ]Dropdown Item #2[/dropdownitem] [dropdownitem type= »menuitem » link= »# » ]Dropdown Item #3[/dropdownitem] [/dropdownbody] [/dropdown]
Labels
[label type= »label-default »] Label[/label] [label type= »label-primary »] Label
[/label] [label type= »label-success »] Label
[/label] [label type= »label-info »] Label
[/label] [label type= »label-warning »] Label
[/label] [label type= »label-danger »] Label
[/label]
Content box
[well type= » »]Curabitur nec elit sagittis, aliquam elit at, viverra dui. Mauris velit quam, ultrices at adipiscing id, dignissim non nisi. Aliquam ullamcorper placerat semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nec feugiat nisl. Maecenas pretium enim ac lectus ultrices placerat.
[/well]
Icons
You can see a full list of the icons you can use here: http://getbootstrap.com/components/
Rounded images
[row] [column lg= »3″ md= »6″ sm= »6″ xs= »12″ ] [image src= »http://www.redfactory.nl/themes/thebeautysalon2/files/2013/12/Depositphotos_10297634_s-150×150.png » shape= »img-circle »] [/column] [column lg= »3″ md= »6″ sm= »6″ xs= »12″ ] [image src= »http://www.redfactory.nl/themes/thebeautysalon2/files/2013/12/shutterstock_33195415-150×150.jpg » shape= »img-circle »] [/column] [column lg= »3″ md= »6″ sm= »6″ xs= »12″ ] [image src= »http://www.redfactory.nl/themes/thebeautysalon2/files/2013/12/shutterstock_2454493-150×150.jpg » shape= »img-circle »] [/column] [column lg= »3″ md= »6″ sm= »6″ xs= »12″ ] [image src= »http://www.redfactory.nl/themes/thebeautysalon2/files/2013/12/shutterstock_3254986-150×150.jpg » shape= »img-circle »] [/column] [/row]