3

I understand the Joomla 3.x version is shipped with Bootstrap 2.x and many of the core components like contacts, login etc... are using the Bootstrap 2.x framework. Even some of the templates like prostar, beez are using the same frame work.

We are developing a component and we plan to use Bootstrap 3.x framework for the component views. I don't want to hack any of the core framework or any file...

All I need to know whether is there a way (safe) to use Bootstrap 3.x framework only on the component views without any conflicts.

Not sure my question makes any sense but ultimately I want to take advantage of responsive features of Bootstrap 3.x for my component views.

4 Answers 4

3

This is what I use to replace bootstrap2 with bootstrap3 :

$doc = JFactory::getDocument();
$assets = "templates/".$this->template;

// load jquery
JHtml::_('jquery.framework');

// remove default bootstrap js
foreach ($doc->_scripts as $url => $pars) {
    if ((strpos($url, "bootstrap.js") !== false) || (strpos($url, "bootstrap.min.js") !== false)) {
    unset($doc->_scripts[$url]); // remove from head
    JHtml::stylesheet($assets.'/css/bootstrapjserror.css'); // Generate error message at bottom of browserscreen
}
}

// add bootstrap 3 js
JHtml::script($assets.'/js/bootstrap.min.js');

// remove default bootstrap css
foreach ($doc->_styleSheets as $url => $pars) {
if ((strpos($url, "bootstrap.css") !== false) || (strpos($url, "bootstrap.min.css") !== false)) {
    unset($doc->_styleSheets[$url]); // remove from head
    JHtml::stylesheet($assets.'/css/bootstrapcsserror.css'); //Generate error message at bottom of browserscreen
}
}
// add bootstrap 3 css
JHtml::stylesheet($assets.'/css/bootstrap.min.css'); 

// add template css
JHtml::stylesheet($assets.'/css/template.css');

Hope this helps!

You can ofcourse use some parts only in your custom views...

2
  • Thanks for this. What is the use of 'Generate error message at bottom of browserscreen'? Mar 20, 2015 at 3:11
  • It notifies you when a components view does load default bootstrap 2. For example JHtml::_('bootstrap.framework'); or JHtml::_('behavior.caption'); is called in some component. If so, I comment them out in the template override of this component. Mar 20, 2015 at 6:15
1

You could namespace all BS3 syntax so that there will not be any conflict with the BS2 already being loaded, that is probably the simplest option but it will require extra work. It should be relatively straightforward using the SCSS version of Bootstrap to prefix all output css.

0

You can unset scripts from head declaration by building a plugin:

class PlgSystemDelbootstrap extends JPlugin {

public function onBeforeCompileHead() {
    $app = JFactory::getApplication();

    //return noting to do if its admin
    if ($app->isAdmin()) {
        return;
    }

    $doc = JFactory::getDocument();
    // uncomment unwanted script
    //unset($doc->_scripts['/media/jui/js/jquery.min.js']);
    //unset($doc->_scripts['/media/jui/js/jquery-noconflict.js']);
    //unset($doc->_scripts['/media/jui/js/jquery-migrate.min.js']);
    unset($doc->_scripts['/media/jui/js/bootstrap.min.js']);
    //unset($doc->_scripts['/media/jui/js/jquery.autocomplete.min.js']);
    //unset($doc->_scripts['/media/system/js/caption.js']);
}
}
2
  • I could be wrong but can you not simply use getApplication('site') rather than using $app->isAdmin()?
    – Lodder
    Mar 10, 2015 at 11:06
  • In the description of the method is "Returns the global {@link JApplicationCms} object, only creating it if it doesn't already exist.", which will create the object application 'site' and it will return. Then you need to check whether we are subject to the administrative section. if you do not use any parameters, it should work the same way. Or you can use this: if( JFactory::getApplication() instanceof JApplicationSite ) Mar 11, 2015 at 13:56
0

It can be done. But, there is no easy way to load Bootstrap 3.x on top of Bootstrap 2.x.

You have to potentially have to deal with CSS and Javascript conflicts. For example, with .table definition, where both frameworks try to load styles. Inside the main

<section id="content">
    <div class="row-fluid">
        <div class="span12">

you can define your own BS3:

<div class="mycomponent container">
    <div class="row">
        <div class="col-md-9" role="main">

From my experience with Joomla v2.5, loading Bootstrap 2.x on top of J25 Styles, even if you add new level (.mycomponent table), you have to check if all declarations are applied correctly and fixing issues adding more levels or !important.

On the JavaScript side, it is even more complex, where there is no way to simply deactivate all loaded scripts (right now, you have to also check for BS2 and mootools conflicts, e.g. modals).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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