{"id":26,"date":"2012-04-18T00:05:06","date_gmt":"2012-04-18T00:05:06","guid":{"rendered":"http:\/\/strappress.com\/demo\/?page_id=26"},"modified":"2013-08-27T03:13:01","modified_gmt":"2013-08-27T03:13:01","slug":"shortcodes","status":"publish","type":"page","link":"https:\/\/strappress.com\/demo\/shortcodes\/","title":{"rendered":"Shortcodes"},"content":{"rendered":"<span class=\"label label-warning\">Update:<\/span> StrapPress now includes a PLUGIN to easily add shortcodes from your post editor!<\/p>\n<p>This page will go over all the different <a class=\" \" href=\"#\" data-toggle=\"tooltip\" rel=\"tooltip\" data-placement=\"top\" data-original-title=\"Create functionality without knowing how to code!\">shortcodes<\/a> that the plugin includes. A majority of the shortcodes are based off Twitter Bootstrap components\/interactions that are offered in the toolkit. All the shortcodes have several different options, but here are some examples to get you excited! Lets get right into all the goodies.<\/p>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Accordions &#8211; Collapse Panels<\/h1>\n<div class=\"row\">\n<div class=\"col-lg-6\">\n\n\t\t<div class=\"panel-group\" id=\"UniqueName\">\n\t\t\n\n\n\t\t<div class=\"panel panel-primary\">\n\t\t<div class=\"panel-heading\">\n\t\t<h4 class=\"panel-title\">\n\t\t<a class=\"accordion-toggle\" data-toggle=\"collapse\" data-parent=\"#UniqueName\" href=\"#collapse1\">Container One Title<\/a>\n\t\t<\/h4>\n\t\t<\/div>\n\t\t<div id=\"collapse1\" class=\"panel-collapse collapse in\">\n\t\t<div class=\"panel-body\"> \n\t\t\nAccordion Bootstrap Content<br \/>\n\n\t\t<\/div>\n\t\t<\/div>\n\t\t<\/div>\n\n\t\t\n\n\n\t\t<div class=\"panel panel-primary\">\n\t\t<div class=\"panel-heading\">\n\t\t<h4 class=\"panel-title\">\n\t\t<a class=\"accordion-toggle\" data-toggle=\"collapse\" data-parent=\"#UniqueName\" href=\"#collapse2\">Container Two Title<\/a>\n\t\t<\/h4>\n\t\t<\/div>\n\t\t<div id=\"collapse2\" class=\"panel-collapse collapse \">\n\t\t<div class=\"panel-body\"> \n\t\t\nAccordion Bootstrap Content<br \/>\n\n\t\t<\/div>\n\t\t<\/div>\n\t\t<\/div>\n\n\t\t\n\n\t\t<\/div>\n<\/div>\n<div class=\"col-lg-6\">\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Alerts<\/h1>\n<div class=\"alert alert-danger\" style=\"width:;\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">\u00d7<\/button> <h4 class='alert-heading'>Alert Heading<\/h4>  <p>Alert Content<\/p><\/div>\n<div class=\"alert alert-warning\" style=\"width:90%;\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">\u00d7<\/button> <h4 class='alert-heading'>Alert Heading<\/h4>  <p>Alert Content<\/p><\/div>\n<div class=\"alert alert-success\" style=\"width:80%;\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">\u00d7<\/button> <h4 class='alert-heading'>Alert Heading<\/h4>  <p>Alert Content<\/p><\/div>\n<div class=\"alert alert-info\" style=\"width:70%;\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">\u00d7<\/button> <h4 class='alert-heading'>Alert Heading<\/h4>  <p>Alert Content<\/p><\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<div class=\"row\">\n<div class=\"col-lg-6\">\n<h1>Badge<\/h1>\n<span class=\"badge badge-\">Label<\/span>\n<p>&nbsp;<\/p>\n<\/div>\n<div class=\"col-lg-6\">\n<h1>Label<\/h1>\n<span class=\"label label-default\"> Label<\/span>\n<span class=\"label label-primary\">Primary<\/span>\n<span class=\"label label-success\">Success<\/span>\n<span class=\"label label-warning\">Warning<\/span>\n<span class=\"label label-danger\">Danger<\/span>\n<span class=\"label label-info\">Info<\/span>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Buttons<\/h1>\n<div class=\"row\">\n<div class=\"col-lg-3\">\n<a  href=\"#\" class=\"btn btn-large btn-primary \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Primary Large<\/a>\n<a  href=\"#\" class=\"btn btn- btn-primary \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Primary Default<\/a>\n<hr class=\"tboot-spacing\" style=\"height: 5px\"><\/hr>\n<a  href=\"#\" class=\"btn btn-small btn-primary \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Primary Small<\/a>\n<hr class=\"tboot-spacing\" style=\"height: 5px\"><\/hr>\n<a  href=\"#\" class=\"btn btn-mini btn-primary \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Primary Mini<\/a>\n<hr class=\"tboot-spacing\" style=\"height: 10px\"><\/hr>\n<a  href=\"http:\/\/bragthemes.com\" class=\"btn btn-large btn-success btn-block \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Block Buttons<\/a>\n<\/div>\n<div class=\"col-lg-3\">\n<a  href=\"#\" class=\"btn btn-large btn-default \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Primary Large<\/a>\n<a  href=\"#\" class=\"btn btn-large btn-primary \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Primary Large<\/a>\n<a  href=\"#\" class=\"btn btn-large btn-info \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Info Large<\/a>\n<a  href=\"#\" class=\"btn btn-large btn-success \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Success Large<\/a>\n<a  href=\"#\" class=\"btn btn-large btn-warning \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Warning Large<\/a>\n<a  href=\"#\" class=\"btn btn-large btn-danger \" target=\"_blank\" title=\"Visit Site\" rel=\"\">DangerLarge<\/a>\n<a  href=\"#\" class=\"btn btn-large btn-inverse \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Link<\/a>\n<\/div>\n<div class=\"col-lg-3\">\n\n\t\t<div class=\"btn-group  \">\n\t\t<a class=\"btn btn-large btn-danger dropdown-toggle\" data-toggle=\"dropdown\" href=\"#\"><i class=\"icon-info-sign \"><\/i> Button Dropdown <span class=\"caret\"><\/span><\/a>\n\t\t<ul class=\"dropdown-menu \">\n\t\t\n\n\t\t<li><a target=\"_blank\" href=\"http:\/\/bragthemes.com\"><i class=\"icon-pencil \"><\/i> Button Text<\/a><\/li>\n\n\t\t<li><a target=\"_blank\" href=\"http:\/\/bragthemes.com\"><i class=\"icon-comment \"><\/i> Dropdown Link<\/a><\/li>\n\n\t\t<li><a target=\"_blank\" href=\"http:\/\/bragthemes.com\"><i class=\"icon-cog \"><\/i> Button Text<\/a><\/li>\n\n\t\t<li class=\"divider\"><\/li>\n\n\t\t<li><a target=\"_blank\" href=\"http:\/\/bragthemes.com\"><i class=\" \"><\/i> Button Text<\/a><\/li>\n\n\t\t<\/ul>\n\t\t<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 20px\"><\/hr>\n<p>Split Button Dropdown<\/p>\n\n\t\t<div class=\"btn-group  \">\n\t\t<a target=\"_blank\" class=\"btn btn-large btn-primary\" href=\"http:\/\/bragthemes.com\"><i class=\" \"><\/i> Split Dropdown <\/a><a class=\"btn btn-large btn-primary dropdown-toggle\" data-toggle=\"dropdown\"><span class=\"caret\"><\/span><\/a>\n\t\t<ul class=\"dropdown-menu \">\n\t\t\n\n\t\t<li><a target=\"_blank\" href=\"http:\/\/bragthemes.com\"><i class=\"icon-pencil \"><\/i> Button Text<\/a><\/li>\n\n\t\t<\/ul>\n\t\t<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 20px\"><\/hr>\n<p>Split Button Dropup<\/p>\n\n\t\t<div class=\"btn-group dropup \">\n\t\t<a target=\"_blank\" class=\"btn btn-large btn-success\" href=\"http:\/\/bragthemes.com\"><i class=\" \"><\/i> Dropup <\/a><a class=\"btn btn-large btn-success dropdown-toggle\" data-toggle=\"dropdown\"><span class=\"caret\"><\/span><\/a>\n\t\t<ul class=\"dropdown-menu \">\n\t\t\n\n\t\t<li><a target=\"_blank\" href=\"http:\/\/bragthemes.com\"><i class=\"icon-pencil \"><\/i> Button Text<\/a><\/li>\n\n\t\t<\/ul>\n\t\t<\/div>\n<\/div>\n<div class=\"col-lg-3\">\n<div class=\"btn-group btn-group-lg  \">\n<a  href=\"http:\/\/bragthemes.com\/\" class=\"btn btn- btn-primary \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Button Text<\/a><a  href=\"http:\/\/bragthemes.com\" class=\"btn btn- btn-danger \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Button Text<\/a>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"btn-group-xs btn-group-vertical \">\n<a  href=\"http:\/\/bragthemes.com\/\" class=\"btn btn- btn-primary \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Button Text<\/a><a  href=\"http:\/\/bragthemes.com\" class=\"btn btn- btn-danger \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Button Text<\/a>\n<\/div>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Jumbotron<\/h1>\n<div class=\"jumbotron\">Content of the Jumbotron<br \/>\n<a  href=\"http:\/\/bragthemes.com\/\" class=\"btn btn-lg btn-primary \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Button Text<\/a><\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Modal<\/h1>\n<div class=\"modal fade\" id=\"myModal1\" style=\"display: none;\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\">\n\n\t\t\t\t\t<button class=\"close\" type=\"button\" data-dismiss=\"modal\">\u00d7<\/button>\n\t\t\t\t\t<h4 class=\"modal-title\" id=\"myModalLabel\">Title of Modal<\/h4>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"modal-body\">\n\t\t\t\t\tHere is he content\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"modal-footer\"><button class=\"btn btn-default\" type=\"button\" data-dismiss=\"modal\">Close<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<!-- \/.modal-content -->\n\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<!-- \/.modal-dialog -->\n\n\t\t\t\t\t<\/div><a class=\"btn btn-danger btn-lg\" href=\"#myModal1\" data-toggle=\"modal\">Click Here<\/a>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Carousel<\/h1>\n\n\t\t<div id=\"ExampleCarousel\" class=\"carousel slide\">\n\t\t<div class=\"carousel-inner\">\n\t\t\n<div class=\"item active\"><img src=\"http:\/\/bragthemes.com\/demo\/agencyboot\/files\/2012\/05\/boat-1170x400.jpeg\"><div class='carousel-caption'><h3>Image Title<\/h3><p>Caption example text<\/p><\/div><\/div>\n<div class=\"item\"><img src=\"http:\/\/bragthemes.com\/demo\/agencyboot\/files\/2012\/05\/snow-1170x400.jpeg\"><div class='carousel-caption'><h3>Second Image Title<\/h3><p>Caption for second image<\/p><\/div><\/div>\n<div class=\"item\"><img src=\"http:\/\/bragthemes.com\/demo\/agencyboot\/files\/2012\/05\/glass-building-1170x400.jpeg\"><div class='carousel-caption'><h3>Third Image Title<\/h3><p>Caption for third image<\/p><\/div><\/div>\n\n\t\t<\/div><a class=\"left carousel-control\" href=\"#ExampleCarousel\" data-slide=\"prev\"><span class=\"icon-prev\"><\/span><\/a><a class=\"right carousel-control\" href=\"#ExampleCarousel\" data-slide=\"next\"><span class=\"icon-next\"><\/span><\/a>\n\t\t<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Icons<\/h1>\n<div class=\"row\">\n<div class=\"col-lg-4\">\n<p>All 361 icons from Font Awesome are included!<\/p>\n<i class=\"icon-spinner icon-2x icon-spin  pull-left icon-muted icon-180 icon-flip-vertical\"><\/i>\n<i class=\"icon-facebook icon-large      \"><\/i>\n<i class=\"icon-user icon-large      \"><\/i>\n<i class=\"icon-bell icon-large      \"><\/i>\n<i class=\"icon-bolt icon-large      \"><\/i>\n<\/div>\n<div class=\"col-lg-4\">\nIcon Stacked<br \/>\n<span class=\"icon-stack\"><i class=\"icon-check-empty icon-stack-base\"><\/i><i class=\"icon-twitter\"><\/i><\/span>\n<\/div>\n<div class=\"col-lg-4\">\n<p>Icon Bulleted List<br \/>\n<ul class=\"icons-ul\"> \n<li><i class=\"icon-li icon-youtube\"><\/i>YouTube<\/li>\n<li><i class=\"icon-li icon-facebook\"><\/i>Facebook<\/li>\n<li><i class=\"icon-li icon-twitter\"><\/i>Twitter<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<p>&nbsp;<\/p>\n<h1>Popovers<\/h1>\n<div class=\"row\">\n<div class=\"col-lg-6\">\n<a href=\"#\" rel=\"popover\" data-placement=\"left\" data-content=\"Content in Popover\" data-original-title=\"Tile in Popover\">Click this text for Popover on left<\/a>\n<hr class=\"tboot-spacing\" style=\"height: 10px\"><\/hr>\n<a href=\"#\" rel=\"popover\" data-placement=\"right\" data-content=\"Content in Popover\" data-original-title=\"Tile in Popover\">Click this text for Popover on right<\/a>\n<hr class=\"tboot-spacing\" style=\"height: 10px\"><\/hr>\n<a href=\"#\" rel=\"popover\" data-placement=\"bottom\" data-content=\"Content in Popover\" data-original-title=\"Tile in Popover\">Click this text for Popover on bottom<\/a>\n<hr class=\"tboot-spacing\" style=\"height: 10px\"><\/hr>\n<a href=\"#\" rel=\"popover\" data-placement=\"top\" data-content=\"Content in Popover\" data-original-title=\"Tile in Popover\">Click this text for Popover on top<\/a>\n<\/div>\n<div class=\"col-lg-6\">\n<a data-placement='top'rel='popover' data-original-title='Tile in Popover'data-content='Content in Popover' href=\"#\" class=\"btn btn- btn-default \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Popover Top<\/a>\n<hr class=\"tboot-spacing\" style=\"height: 10px\"><\/hr>\n<a data-placement='bottom'rel='popover' data-original-title='Tile in Popover'data-content='Content in Popover' href=\"#\" class=\"btn btn- btn-default \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Popover Bottom<\/a>\n<hr class=\"tboot-spacing\" style=\"height: 10px\"><\/hr>\n<a data-placement='left'rel='popover' data-original-title='Tile in Popover'data-content='Content in Popover' href=\"#\" class=\"btn btn- btn-default \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Popover Left<\/a>\n<hr class=\"tboot-spacing\" style=\"height: 10px\"><\/hr>\n<a data-placement='right'rel='popover' data-original-title='Tile in Popover'data-content='Content in Popover' href=\"#\" class=\"btn btn- btn-default \" target=\"_blank\" title=\"Visit Site\" rel=\"\">Popover Right<\/a>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Pricing Tables<\/h1>\n<div class=\"tboot-pricing-table\"><div class=\"row\">\n<div class=\"col-lg-4\"><div class=\"tboot-pricing \"><div class=\"tboot-pricing-header\"><h5>Basic<\/h5><div class=\"tboot-pricing-cost\">$9.99<\/div><div class=\"tboot-pricing-per\">per month<\/div><\/div><div class=\"tboot-pricing-content\">\n<ul>\n<li>Feature One<\/li>\n<li>Feature Two<\/li>\n<li>Feature Three<\/li>\n<li>Feature Four<\/li>\n<li>Feature Five<\/li>\n<\/ul>\n<\/div><div class=\"tboot-pricing-button\"><a href=\"#\" class=\"btn btn-large btn-blue\" target=\"_self\" rel=\"nofollow\">Sign Up<\/a><\/div><\/div><\/div>\n<div class=\"col-lg-4\"><div class=\"tboot-pricing featured\"><div class=\"tboot-pricing-header\"><h5>Best<\/h5><div class=\"tboot-pricing-cost\">$19.99<\/div><div class=\"tboot-pricing-per\">per month<\/div><\/div><div class=\"tboot-pricing-content\">\n<ul>\n<li>Feature One<\/li>\n<li>Feature Two<\/li>\n<li>Feature Three<\/li>\n<li>Feature Four<\/li>\n<li>Feature Five<\/li>\n<\/ul>\n<\/div><div class=\"tboot-pricing-button\"><a href=\"#\" class=\"btn btn-large btn-danger\" target=\"_self\" rel=\"nofollow\">Sign Up<\/a><\/div><\/div><\/div>\n<div class=\"col-lg-4\"><div class=\"tboot-pricing \"><div class=\"tboot-pricing-header\"><h5>Great<\/h5><div class=\"tboot-pricing-cost\">$29.99<\/div><div class=\"tboot-pricing-per\">per month<\/div><\/div><div class=\"tboot-pricing-content\">\n<ul>\n<li>Feature One<\/li>\n<li>Feature Two<\/li>\n<li>Feature Three<\/li>\n<li>Feature Four<\/li>\n<li>Feature Five<\/li>\n<\/ul>\n<\/div><div class=\"tboot-pricing-button\"><a href=\"#\" class=\"btn btn-large btn-blue\" target=\"_self\" rel=\"nofollow\">Sign Up<\/a><\/div><\/div><\/div>\n<\/div><\/div><div class=\"tboot-clear-floats\"><\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<div class=\"tboot-pricing-table\"><div class=\"row\">\n<div class=\"col-lg-3\"><div class=\"tboot-pricing \"><div class=\"tboot-pricing-header\"><h5>Basic<\/h5><div class=\"tboot-pricing-cost\">$9.99<\/div><div class=\"tboot-pricing-per\">per month<\/div><\/div><div class=\"tboot-pricing-content\">\n<ul>\n<li>Feature One<\/li>\n<li>Feature Two<\/li>\n<li>Feature Three<\/li>\n<li>Feature Four<\/li>\n<li>Feature Five<\/li>\n<\/ul>\n<\/div><div class=\"tboot-pricing-button\"><a href=\"#\" class=\"btn btn-large btn-blue\" target=\"_self\" rel=\"nofollow\">Sign Up<\/a><\/div><\/div><\/div>\n<div class=\"col-lg-6\"><div class=\"tboot-pricing featured\"><div class=\"tboot-pricing-header\"><h5>Best<\/h5><div class=\"tboot-pricing-cost\">$19.99<\/div><div class=\"tboot-pricing-per\">per month<\/div><\/div><div class=\"tboot-pricing-content\">\n<ul>\n<li>Feature One<\/li>\n<li>Feature Two<\/li>\n<li>Feature Three<\/li>\n<li>Feature Four<\/li>\n<li>Feature Five<\/li>\n<\/ul>\n<\/div><div class=\"tboot-pricing-button\"><a href=\"#\" class=\"btn btn-large btn-danger\" target=\"_self\" rel=\"nofollow\">Sign Up<\/a><\/div><\/div><\/div>\n<div class=\"col-lg-3\"><div class=\"tboot-pricing \"><div class=\"tboot-pricing-header\"><h5>Great<\/h5><div class=\"tboot-pricing-cost\">$29.99<\/div><div class=\"tboot-pricing-per\">per month<\/div><\/div><div class=\"tboot-pricing-content\">\n<ul>\n<li>Feature One<\/li>\n<li>Feature Two<\/li>\n<li>Feature Three<\/li>\n<li>Feature Four<\/li>\n<li>Feature Five<\/li>\n<\/ul>\n<\/div><div class=\"tboot-pricing-button\"><a href=\"#\" class=\"btn btn-large btn-blue\" target=\"_self\" rel=\"nofollow\">Sign Up<\/a><\/div><\/div><\/div>\n<\/div><\/div><div class=\"tboot-clear-floats\"><\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<div class=\"tboot-pricing-table\"><div class=\"row\">\n<div class=\"col-lg-8\"><div class=\"tboot-pricing featured\"><div class=\"tboot-pricing-header\"><h5>Best<\/h5><div class=\"tboot-pricing-cost\">$19.99<\/div><div class=\"tboot-pricing-per\">per month<\/div><\/div><div class=\"tboot-pricing-content\">\n<ul>\n<li>Feature One<\/li>\n<li>Feature Two<\/li>\n<li>Feature Three<\/li>\n<li>Feature Four<\/li>\n<li>Feature Five<\/li>\n<\/ul>\n<\/div><div class=\"tboot-pricing-button\"><a href=\"#\" class=\"btn btn-large btn-danger\" target=\"_self\" rel=\"nofollow\">Sign Up<\/a><\/div><\/div><\/div>\n<div class=\"col-lg-4\"><div class=\"tboot-pricing \"><div class=\"tboot-pricing-header\"><h5>Great<\/h5><div class=\"tboot-pricing-cost\">$29.99<\/div><div class=\"tboot-pricing-per\">per month<\/div><\/div><div class=\"tboot-pricing-content\">\n<ul>\n<li>Feature One<\/li>\n<li>Feature Two<\/li>\n<li>Feature Three<\/li>\n<li>Feature Four<\/li>\n<li>Feature Five<\/li>\n<\/ul>\n<\/div><div class=\"tboot-pricing-button\"><a href=\"#\" class=\"btn btn-large btn-blue\" target=\"_self\" rel=\"nofollow\">Sign Up<\/a><\/div><\/div><\/div>\n<\/div><\/div><div class=\"tboot-clear-floats\"><\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Progress Bars<\/h1>\n<div class=\"row\">\n<div class=\"col-lg-6\">\n<div class=\"progress  \"><div class=\"progress-bar progress-bar-info\"  style=\"width:20%\"><\/div><\/div>\n<div class=\"progress progress-striped \"><div class=\"progress-bar progress-bar-success\"  style=\"width:40%\"><\/div><\/div>\n<div class=\"progress progress-striped active\"><div class=\"progress-bar progress-bar-warning\"  style=\"width:60%\"><\/div><\/div>\n<div class=\"progress progress-striped active\"><div class=\"progress-bar progress-bar-danger\"  style=\"width:80%\"><\/div><\/div>\n<\/div>\n<div class=\"col-lg-6\">\n<div class=\"progress\">\n<div class=\"progress-bar progress-bar-info \" style=\"width:10%\"><\/div>\n<div class=\"progress-bar progress-bar-warning \" style=\"width:30%\"><\/div>\n<div class=\"progress-bar progress-bar-danger \" style=\"width:40%\"><\/div>\n<\/div>\n<div class=\"progress\">\n<div class=\"progress-bar progress-bar-success \" style=\"width:20%\"><\/div>\n<div class=\"progress-bar progress-bar-info \" style=\"width:60%\"><\/div>\n<div class=\"progress-bar progress-bar-danger \" style=\"width:10%\"><\/div>\n<\/div>\n<div class=\"progress\">\n<div class=\"progress-bar progress-bar-success \" style=\"width:20%\"><\/div>\n<div class=\"progress-bar progress-bar-warning \" style=\"width:30%\"><\/div>\n<div class=\"progress-bar progress-bar-danger \" style=\"width:40%\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Tables<\/h1>\n<div class=\"row\">\n<div class=\"col-lg-3\">\n<table class=\"table    \"><tr><th>names<\/th><th>values<\/th><\/tr><tr><td>name1<\/td><td>25<\/td><\/tr><td>name2<\/td><td>409<\/td><\/tr><\/table>\n<\/div>\n<div class=\"col-lg-3\">\n<table class=\"table table-striped table-bordered  table-hover\"><tr><th>names<\/th><th>values<\/th><\/tr><tr><td>name1<\/td><td>25<\/td><\/tr><td>name2<\/td><td>409<\/td><\/tr><\/table>\n<\/div>\n<div class=\"col-lg-3\">\n<table class=\"table table-striped  table-condensed table-hover\"><tr><th>names<\/th><th>values<\/th><\/tr><tr><td>name1<\/td><td>25<\/td><\/tr><td>name2<\/td><td>409<\/td><\/tr><\/table>\n<\/div>\n<div class=\"col-lg-3\">\n<table class=\"table   table-condensed table-hover\"><tr><th>names<\/th><th>values<\/th><\/tr><tr><td>name1<\/td><td>25<\/td><\/tr><td>name2<\/td><td>409<\/td><\/tr><\/table>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Tabs &#8211; Bootstrap<\/h1>\n<div class=\"row\">\n<div class=\"col-lg-3\">\n\n\t\t<div class=\"tabbable \">\n\t\t\n\n\t\t<ul class=\"nav nav-tabs\">\n\t\t\n\n\t\t<li class='active'><a href=\"#1\" data-toggle=\"tab\">Tab 1<\/a><\/li>\n\n\t\t<li ><a href=\"#2\" data-toggle=\"tab\">Tab 2<\/a><\/li>\n\n\t\t<\/ul>\n\n\t\t<div class=\"tab-content\">\n\t\t\n\n\n\t\t<div class=\"tab-pane active\" id=\"1\">\n\t\t<p>Tab 1 Content<\/p>\n\t\t<\/div>\n\n\n\t\t<div class=\"tab-pane \" id=\"2\">\n\t\t<p>Tab 2 Content<\/p>\n\t\t<\/div>\n\n\t\t<\/div>\n\n\t\t<\/div>\n<\/div>\n<div class=\"col-lg-3\">\n\n\t\t<div class=\"tabbable tabs-below\">\n\t\t\n\n\t\t<ul class=\"nav nav-tabs\">\n\t\t\n\n\t\t<li class='active'><a href=\"#3\" data-toggle=\"tab\">Tab 1<\/a><\/li>\n\n\t\t<li ><a href=\"#4\" data-toggle=\"tab\">Tab 2<\/a><\/li>\n\n\t\t<\/ul>\n\n\t\t<div class=\"tab-content\">\n\t\t\n\n\n\t\t<div class=\"tab-pane active\" id=\"3\">\n\t\t<p>Tab 1 Content<\/p>\n\t\t<\/div>\n\n\n\t\t<div class=\"tab-pane \" id=\"4\">\n\t\t<p>Tab 2 Content<\/p>\n\t\t<\/div>\n\n\t\t<\/div>\n\n\t\t<\/div>\n<\/div>\n<div class=\"col-lg-3\">\n\n\t\t<div class=\"tabbable tabs-right\">\n\t\t\n\n\t\t<ul class=\"nav nav-tabs\">\n\t\t\n\n\t\t<li class='active'><a href=\"#5\" data-toggle=\"tab\">Tab 1 Right<\/a><\/li>\n\n\t\t<li ><a href=\"#6\" data-toggle=\"tab\">Tab 2 Right<\/a><\/li>\n\n\t\t<\/ul>\n\n\t\t<div class=\"tab-content\">\n\t\t\n\n\n\t\t<div class=\"tab-pane active\" id=\"5\">\n\t\t<p>Tab 1 Right Content<\/p>\n\t\t<\/div>\n\n\n\t\t<div class=\"tab-pane \" id=\"6\">\n\t\t<p>Tab 2 Right Content<\/p>\n\t\t<\/div>\n\n\t\t<\/div>\n\n\t\t<\/div>\n<\/div>\n<div class=\"col-lg-3\">\n\n\t\t<div class=\"tabbable tabs-left\">\n\t\t\n\n\t\t<ul class=\"nav nav-tabs\">\n\t\t\n\n\t\t<li class='active'><a href=\"#7\" data-toggle=\"tab\">Tab 1 Left<\/a><\/li>\n\n\t\t<li ><a href=\"#8\" data-toggle=\"tab\">Tab 2 Left<\/a><\/li>\n\n\t\t<\/ul>\n\n\t\t<div class=\"tab-content\">\n\t\t\n\n\n\t\t<div class=\"tab-pane active\" id=\"7\">\n\t\t<p>Tab 1 Left Content<\/p>\n\t\t<\/div>\n\n\n\t\t<div class=\"tab-pane \" id=\"8\">\n\t\t<p>Tab 2 Left Content<\/p>\n\t\t<\/div>\n\n\t\t<\/div>\n\n\t\t<\/div>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n\n\t\t<div class=\"tabbable \">\n\t\t\n\n\t\t<ul class=\"nav nav-pills\">\n\t\t\n\n\t\t<li class='active'><a href=\"#9\" data-toggle=\"tab\">Pill Tab 1<\/a><\/li>\n\n\t\t<li ><a href=\"#10\" data-toggle=\"tab\">Pill Tab 2<\/a><\/li>\n\n\t\t<\/ul>\n\n\t\t<div class=\"tab-content\">\n\t\t\n\n\n\t\t<div class=\"tab-pane active\" id=\"9\">\n\t\t<p>Tab 1 Content in Pill Navigation<\/p>\n\t\t<\/div>\n\n\n\t\t<div class=\"tab-pane \" id=\"10\">\n\t\t<p>Tab 2 Content in Pill Navigation<\/p>\n\t\t<\/div>\n\n\t\t<\/div>\n\n\t\t<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Testimonials<\/h1>\n<div class=\"row\">\n<div class=\"col-lg-4\">\n<div class=\"tboot-testimonial\"><div class=\"tboot-testimonial-content\">These shortcodes are awesome!<\/div><div class=\"tboot-testimonial-author\">BragThemes<\/div><\/div>\n<\/div>\n<div class=\"col-lg-4\">\n<div class=\"tboot-testimonial\"><div class=\"tboot-testimonial-content\">Wow, Bootstrap has everything<\/div><div class=\"tboot-testimonial-author\">BragThemes<\/div><\/div>\n<\/div>\n<div class=\"col-lg-4\">\n<div class=\"tboot-testimonial\"><div class=\"tboot-testimonial-content\">What a great site!<\/div><div class=\"tboot-testimonial-author\">BragThemes<\/div><\/div>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Tooltips<\/h1>\n<div class=\"row\">\n<div class=\"col-lg-3\">\nThis are great to have so you can call something out like a <a class=\" \" href=\"#\" data-toggle=\"tooltip\" rel=\"tooltip\" data-placement=\"right\" data-original-title=\"Text in tooltip\">link for tooltip right<\/a> within content.<br \/>\n<\/div>\n<div class=\"col-lg-3\">\n<a class=\" \" href=\"#\" data-toggle=\"tooltip\" rel=\"tooltip\" data-placement=\"left\" data-original-title=\"Text in tooltip\">Link for tooltip left<\/a>\n<\/div>\n<div class=\"col-lg-3\">\n<a class=\" \" href=\"#\" data-toggle=\"tooltip\" rel=\"tooltip\" data-placement=\"top\" data-original-title=\"Text in tooltip\">Link for tooltip top<\/a>\n<\/div>\n<div class=\"col-lg-3\">\n<a class=\" \" href=\"#\" data-toggle=\"tooltip\" rel=\"tooltip\" data-placement=\"bottom\" data-original-title=\"Text in tooltip\">Link for tooltip bottom<\/a>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Well<\/h1>\n<div class=\"well\" style=\"width:50%;\">Your Well Content in a nice box<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<h1>Columns<\/h1>\n<div class=\"row\">\n<div class=\"col-lg-4\">\nBased on the Bootstrap grid, so make anything you want with up to 12 columns<br \/>\n<\/div>\n<div class=\"col-lg-4\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<div class=\"col-lg-4\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<p>&nbsp;<\/p>\n<div class=\"row\">\n<div class=\"col-lg-3\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<div class=\"col-lg-3\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<div class=\"col-lg-3\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<div class=\"col-lg-3\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<div class=\"row\">\n<div class=\"col-lg-6\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<div class=\"col-lg-3\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<div class=\"col-lg-3\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<div class=\"row\">\n<div class=\"col-lg-3\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<div class=\"col-lg-9\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<\/div>\n<hr class=\"tboot-spacing\" style=\"height: 40px\"><\/hr>\n<div class=\"row\">\n<div class=\"col-lg-6\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<div class=\"col-lg-6\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt aliquam diam, tristique volutpat ante congue non. Sed augue ipsum, tristique nec volutpat at, porttitor euismod sem. Aenean condimentum molestie placerat. Integer a tortor vitae augue ultrices ullamcorper non in turpis.<br \/>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>StrapPress now includes a PLUGIN to easily add shortcodes from your post editor! This page will go over all the different that the plugin includes. A majority of the shortcodes are based off Twitter Bootstrap components\/interactions that are offered in<span class=\"ellipsis\">&hellip;<\/span> <a href=\"https:\/\/strappress.com\/demo\/shortcodes\/\"><\/p>\n<div class=\"read-more\">Read more &#8250;<\/div>\n<p><!-- end of .read-more --><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"full-width-page.php","meta":[],"_links":{"self":[{"href":"https:\/\/strappress.com\/demo\/wp-json\/wp\/v2\/pages\/26"}],"collection":[{"href":"https:\/\/strappress.com\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/strappress.com\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/strappress.com\/demo\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/strappress.com\/demo\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":123,"href":"https:\/\/strappress.com\/demo\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/strappress.com\/demo\/wp-json\/wp\/v2\/pages\/26\/revisions\/377"}],"wp:attachment":[{"href":"https:\/\/strappress.com\/demo\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}