Using Bootstrap 3 in the Joomla Template 3

Written by GeneticsPro | Category: Blog | Hits: 266
using bootstrap3

Twitter Bootstrap is the most popular HTML, CSS and JS platform for developing flexible and mobile projects on the Internet. Now many developers of templates for Joomla began to use the library (framework) Twitter Bootstrap 3 in their templates, but as always there is one BUT...

In Joomla 3, by default, the Bootstrap 2 library is used, and there is no way to disable it, as well as connecting the Bootstrap 3 library, using standard methods. In Joomla 4 we are promised support for Bootstrap version 4, but it will be later, but for now we need to somehow integrate Bootstrap 3 into our current version of Joomla.

This tutorial shows how to get around the problem of using (integration) Bootstrap 3 in the template and Joomla 3 extensions.

1 step. Disabling the Bootstrap 2 Library

Using multiple Bootstrap libraries on the site at the same time can lead to unpredictable consequences, so before connecting Bootstrap 3 we need to disable Bootstrap 2.

To understand what the consequences might be when disabling the Bootstrap 2 library, you need to know how and where this framework connects.

The standard and proper way to connect Bootstrap 2 is to call the framework() and loadCss() methods from the JHtmlBootstrap utility class from the Joomla library.

Connection example:

// Method for loads the JavaScript Bootstrap 2 framework to the top of the document.
JHtml::_('bootstrap.framework');
// Loads the CSS files required for Bootstrap 2.
JHtml::_('bootstrap.loadCss');

These methods can be called in any extensions: components, modules, templates, and Joomla layouts. In addition, the Bootstrap framework can be called in the same methods of the Bootstrap utility, for example, in the "Bootstrap tooltip" (Bootstrap tooltips).

How to disable?

With templates, everything is simple - do not connect Bootstrap 2 in your template and everything... But what to do with components, modules and layouts?

  • The first and time consuming method is finding and redefining, in your template, the files (layouts) of all extensions where Bootstrap 2 is connected, removing connection strings above the specified methods. As it is done in this article, I will not describe, on the Internet there are many materials on this topic.
  • The second way – is to use third-party extensions that allow this. For example, the system plug-in "Joomla options", which allows you to disable the libraries: Mootools, JQuery and Bootstrap.

Joomla options

This plug-in is installed, as well as the usual Joomla extension: Extensions → Extension Manager → Install. After installing the plugin, you need to enable and configure it: Extensions → Plug-in manager → Select type → system. Warning: do not disable the jQuery library, this may disrupt your site.

What consequences?

If a component or module uses Bootstrap 2 elements, almost these elements will not work, or will work, but it's not right. Also, they will not be processed by CSS styles. Below is the login module before redefining it:

Login module 1

Therefore, after Bootstrap 3 is connected, all these elements must be redefined in your Joomla template, see below.

2 step. Connecting the Twitter Bootstrap library 3

You can also connect the Bootstrap 3 library in several ways.

  • Use the third-party plugin, which allows you to connect the Bootstrap 3 library.
  • Use the template in which the Bootstrap 3 library is already connected.
  • Download the framework on the official site and connect it manually.
  • For JKassa subscribers, use the "Genetics Framework" library (gsWork) which already provides basic methods for displaying Bootstrap 3 elements.

Using the library "Genetics Framework"

To start using the gsWork library, it's enough to call two methods in your template:

// Method for loads the JavaScript Bootstrap 3 framework to the top of the document.
GsworkHtmlBootstrap3::framework();
// Loads the CSS files required for Bootstrap 3.
GsworkHtmlBootstrap3::loadCss();

In addition to methods that include JavaScript scripts and CSS stylesheet, the gsWork library has several methods that help you quickly and easily use the Bootstrap 3 elements in your JKassa component extensions or layout:

  • modal – Adds JavaScript support for modal Bootstrap windows;
  • renderModal – Method for visualization of modal windows Bootstrap;
  • tooltip – Adds JavaScript support for Bootstrap prompts;
  • startAccordion – Adds JavaScript support for Bootstrap accordions;
  • endAccordion – Closes the current accordion;
  • addSlide – Starts showing a new accordion slide;
  • endSlide – Closes the current slide.

For more information on using these methods, see the documentation and discussions at the JKassa Subscriber Support Forum.

3 step. Overriding extension files and layouts

If you do NOT use a predefined template in which you already redefined the files under Bootstrap 3, the list below shows the files that you need to override to make your template compatible with Bootstrap 3.

Files are posted on your_website/template/your_template/html/:

  • Components (in the current folder)
    • com_contact
    • com_content
    • com_search
    • com_tags
    • com_users
    • com_weblinks
  • Layouts in the folder - layouts
  • Modules (in the current folder)
    • mod_breadcrumbs
    • mod_login
    • mod_menu
    • mod_search
  • modules.php

On issues related to Bootstrap migration, the following link will be useful for you - Migrating from 2.x to 3.0.
Also you can use, as an example, a simple template for Joomla! 3.x, compatible with Twitter Bootstrap v3.x.

Below is the module for logging on to the site after its redefinition:

Login module 2

4 step. Bootstrap 3 layout template for the JKassa component

One of the innovations in JKassa (in comparison with JoomlaKassa) is the templates for loading the dynamic content of JKassa extensions (component and modules) in the external interface of the store. JKassa templates are built using the Liquid language, an open source language that allows you to easily combine the design of JKassa extensions with the design of your main template for the site.

One such template is the template "jkTemplates - Bootstrap 3" compatible with Twitter Bootstrap v3.x. To install it and select it as the default template, go to the JKassa administrative interface: Components → JKASSA → Tools → Design.

JKassa templates 1

JKassa templates 2

The result

Following these steps, you will be able to "get around" Joomla and use your favorite template, which is built on the Twitter Bootstrap 3 framework. But Joomla, like us, does not stand still, and very soon we will be able to enjoy the new design of our sites and online stores, Working on Bootstrap 4!

Comments (0)

There are no comments posted here yet

Leave your comments

Posting comment as a guest. Sign up or login to your account.
Type the text presented in the image below