How to Stop Bootstrap Loading Multiple Times in Joomla
- Written by Valentín García Valentín García
- Category: Joomla Joomla
- Published: 23 November 2016 23 November 2016
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:
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.
- 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:
- Regular Labs - ReReplacer
- Add new
In Search parameter, paste the HTML output that loads the duplicated Bootstrap instance, and leave the Replace parameter blank.
- Go to the "Search areas" tab and set "Enable in area" to "Head (not in body)".
- 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.