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:

You will create overrides for the Bootstrap CSS and JavaScript files for your front-end custom template.

You will leave the back-end template alone in the default configuration. It will load the Bootstrap version 2 CSS and JavaScript files and it will function fine.

To create the overrides, do as follows:

  1. Add the current Bootstrap CSS file (both .css and .min.css) from http://www.getbootstrap.com to /templates/yourtemplate/css/
  2. Add the current Bootstrap JavaScript file (both .js and .min.js) from http://www.getbootstrap.com to /templates/yourtemplate/js/jui/
    (You will probably have to create the "jui" folder.)
  3. 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');
    JHtml::script(Juri::base() . 'templates/cms/js/jui/bootstrap.min.js', 'bootstrap', true, false, true, true);
    Calling the Bootstrap JavaScript file with the JHtml command will allow Joomla to check for overrides in the appropriate folder in your template first before looking in /media/jui/. And it will enable the other functionality that comes with that command (i.e., enabling the jQuery framework in noConflict mode and loading the .min version normally and the non-minified version when in debug mode).

Please let me know if I got something wrong.

Read more here: