How to Use Bootstrap 3 with Joomla 3

By integrating bootstrap to the core, Joomla creators did a great job and it is a great relief. Meanwhile, bootstrap 4 is coming soon, Joomla still uses an old version 2x. It seems Joomla devs not planning to move to the newer version soon enough. So I wanted to use bootstrap 3 with Joomla front end templates badly since it got plenty of new features.

It’s easy, I just need to add bootstrap files to template index file from one of the CDNs or local server. But the problem is Joomla loads both bootstrap 2 and 3 now, which leads conflict between two versions and theme styles got screwed up.

Unlike previous versions, Joomla backed bootstrap 2x into its core. Therefor bootstrap library files loads while rendering the jdoc header. Apparently I got two options, change the Joomla core or anything else.

Hacking core files never are my favorite while coding. I do not hack into core or add hooks  unless there is absolutely no possible way to gain what I want. Because it reduces the maintainability. So I thought I might remove bootstrap 2 x files after rendering the header section and it worked.

This script should be placed after the jdoc header declaration.I remove core jquery related files as well. I wanted to show, this way we can remove any script file that is rendering with jdoc header.

Leave a Reply