14

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?
15

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']);
  • 2
    Great! Took me 5 minutes to create my own "remove jquery and boostrap" plugin thanks to you. – Alexandre Paulo Aug 6 '15 at 15:15
16

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.

  • Never thought of it that way, cool!!! – Mohd Abdul Mujib Apr 17 '15 at 4:39
7

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);
}
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.

4

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

  • 1
    Thanks Lodder. It seems a bit short sighted they don't have an off button. Hopefully they will add it to Joomla 3.4 :) – TryHarder Oct 27 '14 at 13:33
  • You shouldn't have core files. Period. There's plenty of other ways to remove all traces of Bootstrap, without hacking core files and all of them are preferable. All of them will also survive a Joomla update, which can't be said of hacked core files. – Seth Warburton Jul 2 '15 at 6:57
  • @seth, yes now there are other ways. This answer was written 9 months ago and at the time, I didn't know any other way – Lodder Jul 2 '15 at 7:31
  • @Valentin Despa, could you please delete this answer for me as I'm not able to? – Lodder Mar 24 '16 at 9:10
  • @oooooo - I've requested to have the "accepted" flag removed from my answer as it isn't the solution here. If they're unable to do so, would you mind marking someone else's answer as "accepted" please? – Lodder May 5 '17 at 10:59
3

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).

    1. 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.

2

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.

1

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

  • Nice catch. Bootstrap 3 is a mistake. I'll edit it now. – TryHarder Oct 27 '14 at 22:43
-2

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

  • 3
    You're basically saying 49 euros to remove Bootstrap is also an option? – Lodder Sep 1 '15 at 22:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.