The Joomlashack Blog

How to Stop Bootstrap Loading Multiple Times in Joomla

Written by Valentín García Valentín García
Published: 23 November 2016 23 November 2016
Tips to Fix Bootstrap Being Loaded Multiple Times in Joomla

Bootstrap is the most popular CSS framework to build and design websites. Developers and designers depend on it on a daily basis.

However, Bootstrap is so popular that some sites end up loading it several times. Imagine this scenario where Bootstrap loads three times:

  • Bootstrap loads from Joomla core
  • Bootstrap loads from a third party component
  • Bootstrap loads from a third party module

In this post, I'll give you some tips to fix the load of several instances of Bootstrap in your Joomla site.

Important: the tips below apply only when your site loads multiple instances of Bootstrap 2.

Remove duplicated instances of Bootstrap through template or component settings

Check the source code of your public site (Ctrl + U in Firefox) to see which CSS files are loaded. Look for Bootstrap CSS instances:

Checking for Duplicate Bootstrap in Joomla

If you detect that Bootstrap CSS is loaded more than once, and all of them are the same version (for example, Bootstrap 2), look in the template or third party component settings if there is a parameter to disable its own Bootstrap loading.

In this way, you disable the load of the duplicated Bootstrap CSS files.

Remove duplicated instances of Bootstrap using ReReplacer

ReReplacer is a popular Joomla extension to make sitewide replacements.

You can use this extension to replace HTML output inside the head tag where the CSS loads commonly occur.

  • Go to the ReReplacer page.
  • Click the "Download Free" button.
  • Download the Joomla version you need.

Download ReReplacer in Joomla

  • Login to your Joomla administrator area.
  • Go to Extensions > Manage.
  • Upload a Package File.
  • Find the zip you just downloaded and click the "Upload and Install" button.

Now that ReReplacer is installed, create a new ReReplacer item from:

  • Components
  • Regular Labs - ReReplacer
  • Add new

In Search parameter, paste the HTML output that loads the duplicated Bootstrap instance, and leave the Replace parameter blank.

Removing Bootstrap with Rereplacer in Joomla

  • Go to the "Search areas" tab and set "Enable in area" to "Head (not in body)".

Rereplacer settings in Joomla

  • Set a title for the ReReplacer item and save.

If everything is setup properly, ReReplacer will remove the load of the duplicated Bootstrap CSS file that match the search criteria.