Bootstrap 3 for component views with Joomla 3.x

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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']);
}
}

Answer 4

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