{"id":48576,"date":"2015-05-20T06:02:30","date_gmt":"2015-05-20T10:02:30","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=48576"},"modified":"2017-07-25T10:34:14","modified_gmt":"2017-07-25T14:34:14","slug":"joomla-3-x-how-to-work-with-bootstrap-tabs-module","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-3-x-how-to-work-with-bootstrap-tabs-module.html","title":{"rendered":"Joomla 3.x. How to work with &#8220;Bootstrap tabs&#8221; module"},"content":{"rendered":"<p>This tutorial shows how to work with <strong>Bootstrap tabs module<\/strong> in <a href=\"https:\/\/www.templatemonster.com\/joomla-templates.php\" target=\"_blank\">Joomla 3.x.<\/a><\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/dgbjTKCADec\"><\/iframe>\r\n<\/div>\r\n<p>The Bootstrap Tabs Module displays a fixed number of Articles from a specific Category or a set of Categories in tabbed layout.<\/p>\r\n<ol>\r\n\t<li><p>Use the <a target=\"_blank\" href=\"\/help\/developer-tools.html\">Inspect Element (Firebug) tool<\/a> to find out module&#8217;s position.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-1-300x210.png\" alt=\"Joomla 3.x. How to work with Bootstrap tabs module-1\" width=\"300\" height=\"210\" class=\"alignnone size-medium wp-image-75397\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-1-300x210.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-1-150x105.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-1-768x538.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-1.png 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Next, navigate to <strong>Extensions -> Module manager<\/strong> and sort out modules in the located position. Open the <strong>Bootstrap tabs<\/strong> module and check what category is assigned to it in the module&#8217;s <strong>Category <\/strong>field.<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Navigate to <strong>Content -> Articles manager<\/strong> and sort out the articles, assigned to the corresponding category. Edit the title of the module loaded in the article, and edit the article&#8217;s title.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-2-300x210.png\" alt=\"Joomla 3.x. How to work with Bootstrap tabs module-2\" width=\"300\" height=\"210\" class=\"alignnone size-medium wp-image-75398\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-2-300x210.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-2-150x105.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-2-768x538.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-2.png 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Next, edit module title and category title in the <strong>Articles &#8211; Newsflash (Advanced)<\/strong> module.  I.e. it&#8217;s the <strong>Articles -> Newsflash (Advanced)<\/strong>  which shows articles in columns under the Bootstrap Tab module.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-3-300x210.png\" alt=\"Joomla 3.x. How to work with Bootstrap tabs module-3\" width=\"300\" height=\"210\" class=\"alignnone size-medium wp-image-75399\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-3-300x210.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-3-150x105.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-3-768x538.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-3.png 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t<\/li>\r\n<\/ol>\r\n<p>In order to add a new tab into the module, you will need to duplicate a category of articles, an article, Articles -> Newsflash (Advanced) module and edit number of columns in the Bootstrap Tab module:<\/p>\r\n<ol>\r\n\t<li>\r\n\t\t<p>Go to <strong>Content -> Categories manager -> New<\/strong>. Create and publish a new subcategory under the category, assigned to the <strong>Bootstrap tabs<\/strong> module. Create articles in the subcategory with the same content: Intro image, caption or HTML intro text.<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Copy the article code that calls out articles in the tab and create a new article in the category, assigned to the <strong>Bootstrap Tab<\/strong> module. Make sure to insert new <strong>category\/module<\/strong> title into the new article content:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-4-300x210.png\" alt=\"Joomla 3.x. How to work with Bootstrap tabs module-4\" width=\"300\" height=\"210\" class=\"alignnone size-medium wp-image-75400\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-4-300x210.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-4-150x105.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-4-768x538.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-4.png 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Please, note, that in order to display new tab, you should also increase a number of articles in the <strong>Bootstrap Tabs<\/strong> module:<\/p>\r\n\r\n\t\t<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-5-300x210.png\" alt=\"Joomla 3.x. How to work with Bootstrap tabs module-5\" width=\"300\" height=\"210\" class=\"alignnone size-medium wp-image-75401\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-5-300x210.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-5-150x105.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-5-768x538.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-5.png 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Next, duplicate the <strong>Articles -> Newsflash (Advanced)<\/strong> module, displayed in the <strong>Bootstrap<\/strong> tabs. Change module title and categories of articles in the module to the new ones you have created. Publish the module.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-6-300x210.png\" alt=\"Joomla 3.x. How to work with Bootstrap tabs module-6\" width=\"300\" height=\"210\" class=\"alignnone size-medium wp-image-75402\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-6-300x210.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-6-150x105.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-6-768x538.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/05\/Joomla-3.x.-How-to-work-with-Bootstrap-tabs-module-6.png 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n\t\t\r\n\t<\/li>\r\n<\/ol>\r\n<p>Also, check out the collection of fully responsive <a href=\"https:\/\/www.templatemonster.com\/bootstrap-website-templates\/\" target=\"_blank\" title=\"Bootstrap Templates\">Bootstrap templates<\/a>.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=dgbjTKCADec?width=1280&amp;height=720\" rel=\"prettyPhoto\">Joomla 3.x. How to work with &#8220;Bootstrap tabs&#8221; module<\/a>\r\n\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/cart.php?addOffer=587\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-1-(500-x100).jpg\" \/>\r\n<\/a>","protected":false},"excerpt":{"rendered":"<p>This tutorial will show you how to work with &#8220;Bootstrap tabs&#8221; module in Joomla 3.x.<\/p>\n","protected":false},"author":65,"featured_media":48582,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[1379,483,557,977],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/48576"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=48576"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/48576\/revisions"}],"predecessor-version":[{"id":82225,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/48576\/revisions\/82225"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/48582"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=48576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=48576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=48576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}