Categories

Featured templates

Joomla 3.x. How to work with “Bootstrap tabs” module

Stacy Martin May 20, 2015
Rating: 5.0. From 3 votes.
Please wait...

This tutorial shows how to work with Bootstrap tabs module in Joomla 3.x.

The Bootstrap Tabs Module displays a fixed number of Articles from a specific Category or a set of Categories in tabbed layout.

  1. Use the Inspect Element (Firebug) tool to find out module’s position.

    Joomla 3.x. How to work with Bootstrap tabs module-1
  2. Next, navigate to Extensions -> Module manager and sort out modules in the located position. Open the Bootstrap tabs module and check what category is assigned to it in the module’s Category field.

  3. Navigate to Content -> Articles manager and sort out the articles, assigned to the corresponding category. Edit the title of the module loaded in the article, and edit the article’s title.

    Joomla 3.x. How to work with Bootstrap tabs module-2
  4. Next, edit module title and category title in the Articles – Newsflash (Advanced) module. I.e. it’s the Articles -> Newsflash (Advanced) which shows articles in columns under the Bootstrap Tab module.

    Joomla 3.x. How to work with Bootstrap tabs module-3

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:

  1. Go to Content -> Categories manager -> New. Create and publish a new subcategory under the category, assigned to the Bootstrap tabs module. Create articles in the subcategory with the same content: Intro image, caption or HTML intro text.

  2. Copy the article code that calls out articles in the tab and create a new article in the category, assigned to the Bootstrap Tab module. Make sure to insert new category/module title into the new article content:

    Joomla 3.x. How to work with Bootstrap tabs module-4
  3. Please, note, that in order to display new tab, you should also increase a number of articles in the Bootstrap Tabs module:

    Joomla 3.x. How to work with Bootstrap tabs module-5
  4. Next, duplicate the Articles -> Newsflash (Advanced) module, displayed in the Bootstrap tabs. Change module title and categories of articles in the module to the new ones you have created. Publish the module.

    Joomla 3.x. How to work with Bootstrap tabs module-6

Also, check out the collection of fully responsive Bootstrap templates.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to work with “Bootstrap tabs” module
Best Joomla Themes
This entry was posted in Joomla! Tutorials and tagged Bootstrap, joomla, module, tab. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket