Joomla! 3 is in an awkward phase right now, in that they have integrated Bootstrap version 2, but Bootstrap has advanced to version 3 with such compelling improvements that it cannot be ignored. Everyone is aware of the problem and there are a wide variety of responses to it ranging from people who say we shouldn't buck the system and should use Bootstrap version 2 or we're asking for problems; all the way to people who say they are quitting Joomla for good because it is ruined; as well as various proposed solutions, most of which are not quite right and may lead to issues down the road.
I've researched, experimented, and tested. I've implemented the override solution successfully on 3 web sites. The solution is utterly simple:
To create the overrides, do as follows:
- Add the current Bootstrap CSS file (both .css and .min.css) from http://www.getbootstrap.com to /templates/yourtemplate/css/
(You will probably have to create the "jui" folder.)
- Include these 2 lines within PHP tages above the <!doctype html> at the top of your template's index.php file (located inside /templates/yourtemplate/):
JHtml::stylesheet(Juri::base() . 'templates/cms/css/jui/bootstrap.min.css');
Please let me know if I got something wrong.
Read more here: