How can I completely remove Bootstrap from the frontend of Joomla?

Question

Recently, I tried to remove all instances of Bootstrap from the front end of Joomla for debugging purposes. I was using a skeleton template with a relatively new installation of Joomla 3.3. I removed all inclusions of Bootstrap from the template and I turned off all plugins and modules that I thought could be loading it. I also cleared Joomla cache. Despite that, firebug told me that Joomla was still trying to load bootstrap.min.js from /media/jui/js/bootstrap.min.js

I got round the problem by temporarily renaming the bootstrap file, but it got me wondering.

• Does this happen with all Joomla 3.3 installations or is just mine?
• Is there a way I can identify where bootstrap is being loaded from?
• Is there a way I can disable bootstrap from loading?

Answer 1

Does this happen with all Joomla 3.3 installations or is just mine?

In version: 3.2-3.7 (I tested).

Is there a way I can disable bootstrap from loading?

Yes, there is. Just remove it before building the header, using event onBeforeCompileHead (More info in the docs.).

In view of the possibility of attaching the library at any time by various extensions. It is not enough to remove from template and modules few lines. This is not the a perfect solution. But you can be sure that it will not load.

In my project I'm using bootstrap 3.2. I spent the whole day to find a way to remove bootstrap 2.

The only solution was to remove script before building the header.

My solution is to crate a plugin:

class plgSystemYourPlugin extends JPlugin
{
    public function onBeforeCompileHead()
    {
        // Application Object
        $app = JFactory::getApplication();

        // Front only
        if( $app instanceof JApplicationSite )
        {
            $doc            = JFactory::getDocument();
            // Remove default bootstrap
            unset($doc->_scripts[JURI::root(true).'/media/jui/js/bootstrap.min.js']);
        }
    }
}

It works in Joomla! 3.2-3.6

(For interested) I needed to also remove this:

    unset($doc->_scripts[JURI::root(true).'/media/system/js/frontediting.js']);
    unset($doc->_scripts[JURI::root(true).'/media/system/js/html5fallback.js']);

Answer 2

An alternate hack that I always like to throw out, since it doesn't involve editing core files is to override the css file with a blank css file in your template. This will still lead to a call to your server to load the resource, but you won't have to have any bootstrap styling.

Just add an empty file here: templates/YOUR_TEMPLATE/css/jui/bootstrap.min.css and templates/YOUR_TEMPLATE/js/jui/bootstrap.min.js.

Naturally any component setup to use bootstrap will look unstyled, and there will still be a call to load the css and js files by the browser. However, the files will be empty (small download size) and have no impact on the styling.

Answer 3

Just an idea (not tested), but how about building a small plugin that unsets Bootstrap?

Something like this:

public function onAfterRender() {
    //get the array containing all the script declarations
     $document = JFactory::getDocument(); 
     $headData = $document->getHeadData();
     $scripts = $headData['scripts'];

     //remove script
     unset($scripts['/media/jui/js/bootstrap.min.js']);
     $headData['scripts'] = $scripts;
     $document->setHeadData($headData);
}

Answer 4

If you are not looking at creating your own plugin, a simple solution would be to try:

Unset in Template

//JS
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
// CSS    
unset($doc->_stylesheets[$this->baseurl.'/media/jui/js/bootstrap.css']);

However - some extensions still insert the js or css even if you remove it. The most reliable way I have discovered is with:

JCC - JS CSS Control Plugin

http://extensions.joomla.org/extensions/extension/core-enhancements/performance/js-css-control

However - you will still have sometimes have js inline still inserted in your template.So - sometimes you will need to do preg_replace for the inline js.

Answer 5

There are two ways:

1. Unset the included files from within your template, and then create an override to prevent any module or component you may be using from including them again (not as much work as it sounds).

   2. Use any one of the numerous system plugins that can do this. Personally, I'd recommend this one https://github.com/phproberto/plg_sys_mootable as it gives full control over when and where to remove files so it can be set to not break front-end editing for example (which if you remove everything will be broken normally).

Option 2 has the ease-of-use advantage but you still have to live with crummy Bootstrap 2.x markup littering your site. Option 1 takes a little more work but means you can remove every trace of Bootstrap; always my preferred option. See http://joomlafuture.com/ for example code.

Answer 6

This is something that has bugged me since the beginning of Joomla 3.x and still to this day, nothing has been done to give the user the option to prevent the bootstrap files from being loaded.

Unfortunately, Bootstrap gets loaded from the core of Joomla and this is due to some core features that require it to work, thus removing it completely will prevent some features from working such as the Tooltip.

The only way to remove it (that I know of) is via a core hack in the following file: (not recommended)

libraries\cms\html\bootstrap.php

The only other way I can think of is create a template override for every module, component and plugin that calls the bootstrap library and remove it.

Neither method is nice however Joomla 3.x was built on Bootstrap so we have to live with it

Answer 7

Joomla does not load bootstrap CSS automatically, but it does load the JS. If your template uses the standard method to load the Joomla head:

<jdoc:include type="head" />

It will load mootools, jquery, and bootstrap files in this order:

<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>

It does not load CSS files. You can test it by removing the line from your template file, then checking which head files go missing.

The bootstrap CSS is loaded by your template. Joomla (since 2.5 I believe) included Bootstrap 2.x in their media files for easy access. Protostar for some reason does not call bootstrap from the media files. Instead, they have copy and pasted the entire bootstrap CSS into their template.css file. Other frameworks call Bootstrap. Warp 7, for example, does have a checkbox to enable or disable Bootstrap.

Since the frontend and backend have different templates, Bootstrap can be loaded or disabled for one and not the other. There is no dependency if you wish to disable Bootstrap from the frontend and not the backend.

My preference is Bootstrap 3, so on several different custom templates, I've downloaded and included the bootstrap 3 css in my template head after the joomla head line and within my template head tags:

$document = JFactory::getDocument();
$document->setMetaData( 'viewport', 'width=device-width, initial-scale=1, minimum-scale=1' );
$document->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/bootstrap.min.css');

The method is slightly different for frameworks such as Warp 7. You can also load directly from the bootstrap CDN url if you prefer.

So Joomla does not force you to use Bootstrap or any version of Bootstrap, at least for the CSS. You could use other responsive frameworks if you like. It's all done in the template. No need for hacks or plugins.

Answer 8

Joomla 3.3(less than) is based on Bootstrap 2.3 not Bootstrap 3.X

I wanted to migrate to new release of Bootstrap, and there was a lot positions which I've to changed of course based on my idea. I've done it but very lately.

In a lot positions of code I had to disable Bootstrap such below code:

// Add JavaScript Frameworks JHtml::_('bootstrap.framework');

and made a new completely Joomla template to do that; but if you want to migrate to another UI framework I think, you have to continue these process too and at least you have more than 30 Components, Modules, Plugins, and some Joomla legacy codes you have to developed again. It's simple but needs many time.

New perception 02 July 2015: based on "unset" method in Joomla that some of our friends mentioned in this forum I could completely disable previous version of Bootstrap and Mootools or any other Javascript library or CSS file. I'm sorry in before I mentioned bad solution. you can read this post to get more information to disable Bootstrap

Answer 9

Or you can use a template from Yootheme, set it as default, then in that template config select "do not load bootstrap."