Guide for using Bootstrap in Joomla backend

Question

This is based in the Joomla backend, component development.

I notice that the base features of bootstrap 2.3 that Joomla uses is modded, so it is missing icons and such.

Is there any guide to show these differences? Some sort a guide would be great to avoid pulling in Bootstrap again just to get a few basic features (like the default icons).

I know most of this is termed "JUI" and doing some searching I am unable to find any documentation on it. Is there anything other then reading the css files to help with this? Or is it just best be add in your own css and override the core bootstrap (as in a container class that applies the override within the component)?

Answer 1

The Bootstrap version included within Joomla is 2.3.2 (http://getbootstrap.com/2.3.2/). There are a few modifications, but unfortunately only documented in the code.

The thing you see with the icons is actually not a modification of the Bootstrap files but a flavor of the Isis template. It uses IcoMoon (http://icomoon.io) icons instead of the default Bootstrap ones. The list of the available icons can be found here: https://docs.joomla.org/J3.x:Joomla_Standard_Icomoon_Fonts

As of today, there are even more icons available as it was extended eventually. The page however never was updated with them. You either have to try or read the LESS file :)

Modifications introduced to provide Mootools compatibility

• div.modal (instead of .modal), modals.joomla.less and responsive-767px-max.joomla.less
• hideme x hide ($.Event('hideme')), bootstrap-collapse-joomla.js and bootstrap-tooltip-joomla.js
• Click on parent menu support, bootstrap-dropdown-joomla.js

Ref: https://github.com/joomla/joomla-cms/pull/1172