Howto use Bootstrap 3.x in Joomla 3.x

183 views
Skip to first unread message

Maik

unread,
Jan 7, 2014, 4:56:45 PM1/7/14
to joomla-de...@googlegroups.com
Hi,
i am new in joomla 3.x and developing in it. actually i want to use bootstrap and found out, after trying forming from tutorial for bootstrap 3.0.3, that joomla 3.x came with bootstrap 2.3. I whould use the newest version of bootstrap but cant find any hint to update it in joomla. Can i simply exchange the files and do the upgrade in template or will there an updatefunction in joomla?

Michael Babker

unread,
Jan 7, 2014, 5:24:17 PM1/7/14
to joomla-de...@googlegroups.com
To avoid touching core files, you can override the base JavaScript by placing a bootstrap(.min).js file at templates/<your_template>/js/jui/ and then just compile your own CSS at the template level.  The only potential issues I can see with this are that you'll have to build and maintain overrides for most every view and layout in the system since extension developers and core are building on Bootstrap 2.3 and any changes in the Bootstrap JavaScript API between the two versions.

I know Joostrap is shipping Bootstrap 3 based templates now, maybe other template providers are as well, if you're interested in seeing how they're handling it.


On Tue, Jan 7, 2014 at 3:56 PM, Maik <m_pu...@gmx.de> wrote:
Hi,
i am new in joomla 3.x and developing in it. actually i want to use bootstrap and found out, after trying forming from tutorial for bootstrap 3.0.3, that joomla 3.x came with bootstrap 2.3. I whould use the newest version of bootstrap but cant find any hint to update it in joomla. Can i simply exchange the files and do the upgrade in template or will there an updatefunction in joomla?

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To post to this group, send an email to joomla-de...@googlegroups.com.
Visit this group at http://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/groups/opt_out.

Matt Thomas

unread,
Jan 7, 2014, 6:16:44 PM1/7/14
to joomla-de...@googlegroups.com

Having done something like this before, I can tell you that maintaining the overrides of core and extension layouts can be a daunting task at times. It really depends on how much of the core and how many extensions you use, not to mention if it is important to you to keep current with core changes.

Best,

Matt Thomas
@betweenbrain
http://matt-thomas.me/
http://betweenbrain.com/
https://github.com/betweenbrain

Sent from mobile. Please pardon any typos or brevity.

Maik

unread,
Jan 7, 2014, 6:36:05 PM1/7/14
to joomla-de...@googlegroups.com
Hi,
ok i didnt thought that it could be so difficult. is there a plan when the version will upgraded? as far as i could read bootstrap 3.x is much more compatible to mobile devices and fixes many issues and so on. it would be nice to have the latest version as far as possible in joomla.

Matt Thomas

unread,
Jan 7, 2014, 6:46:29 PM1/7/14
to Joomla! General Development
The hope is to upgrade to the latest version of Bootstrap for Joomla 4.0. Hopefully by then, the use of JLayout will be more widespread to help facilitate overrides like this.

BS 2.3 needs to stay within the entire Joomla 3 series for backwards compatibility.

Hope that helps!
On Tue, Jan 7, 2014 at 6:36 PM, Maik <m_pu...@gmx.de> wrote:
Hi,
ok i didnt thought that it could be so difficult. is there a plan when the version will upgraded? as far as i could read bootstrap 3.x is much more compatible to mobile devices and fixes many issues and so on. it would be nice to have the latest version as far as possible in joomla.

--

Anthony Olsen

unread,
Jan 7, 2014, 6:18:25 PM1/7/14
to joomla-de...@googlegroups.com
T3 has some good overrides for BS3 in the latest version.

Johan Janssens

unread,
Jan 7, 2014, 8:24:58 PM1/7/14
to joomla-de...@googlegroups.com
Hi Maik,

As Michael already mentions I would think very hard if you want to do this. The only scenario where this doesn't bring too many drawback is a scenario where you will not be using any third party extensions. Most if not all Joomla 3 extensions expect Bootstrap 2.3 to be loaded. You will likely run into styling conflicts and potentially also javascript issues.

Is there any specific technical reason you want to use Bootstrap 3 ?

Johan

Maik

unread,
Jan 8, 2014, 3:45:55 AM1/8/14
to joomla-de...@googlegroups.com
Hi Johan,
ok understand it. So i dont want to make things complicated as they already are ;). The only reason is, that i start to develop my own component and a part of it is the styling too. Thats why i came to bootstrap and less in Joomla 3.x as a new feature. I think its interessting and a good solution, or not? As i check the website of bootstrap i startet to use the examples from there and wonder why it wont work. After a short time of frustating and searching i found out which Version will use in 3.x . After that i read the Changes of Bootstrap 2.3 to 3 and thought it could be good to use the actual version because of new features, bugfixes and more compatibility support for newer browser and mobile devices.
But now i will use the 2.3 and wait for an Update over Joomlaversion...

thx to all

quinto...@gmail.com

unread,
Jan 8, 2014, 7:58:32 AM1/8/14
to joomla-de...@googlegroups.com
Hdyyeyeyeryyry
Sent from my BlackBerry® wireless device

From: Maik <m_pu...@gmx.de>
Date: Tue, 7 Jan 2014 13:56:45 -0800 (PST)
Subject: [jgen] Howto use Bootstrap 3.x in Joomla 3.x

Hi,
i am new in joomla 3.x and developing in it. actually i want to use bootstrap and found out, after trying forming from tutorial for bootstrap 3.0.3, that joomla 3.x came with bootstrap 2.3. I whould use the newest version of bootstrap but cant find any hint to update it in joomla. Can i simply exchange the files and do the upgrade in template or will there an updatefunction in joomla?

Johan Janssens

unread,
Jan 8, 2014, 9:34:24 AM1/8/14
to joomla-de...@googlegroups.com
Hi Maik,

I understand and it's a very valid question and reasoning. In your case I would advice you to use Bootstrap 2.3 this will give you the best compatibility and easy of implementation. 

Joomla will always be using a slightly older version of Bootstrap, nothing wrong with that. A next major version of Joomla can then move to the new version of Bootstrap, likely this will happen in Joomla 4.

Happy coding !


--
You received this message because you are subscribed to a topic in the Google Groups "Joomla! General Development" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/joomla-dev-general/3yWk7lDy3nU/unsubscribe.
To unsubscribe from this group and all of its topics, send an email to joomla-dev-gene...@googlegroups.com.

Niv Froehlich

unread,
Jan 8, 2014, 4:22:10 PM1/8/14
to joomla-de...@googlegroups.com
Hi Maik,

I am working with Bootstrap 3 quite extensively on a 'non-Joomla!' related project.   I have good familiarity with Bootstrap 2.3 (I put on a workshop for our local Joomla! user group), and to tell you the truth, there are no significant advantages that Bootstrap 3 provides over 2.3 - I'd stick with Bootstrap 2.3 for Joomla! 3.x versions - unless you have a compelling reason to do otherwise.   

IMO, the fact that Bootstrap 3 is the 'latest' is not, in itself, a good reason to jump ship from Bootstrap 2.3.

In fact, stylistically speaking, Bootstrap 2.3 is much more aesthetic (BS 3 trades 'looks' for 'performance'), and a lot of the Bootstrap community's focus is on how to make Bootstrap 3's appearance resemble that of Bootstrap 2.3 - seems very counter-productive to me - the best way to emulate Bootstrap 2.3's look and feel is to use Bootstrap 2.3 to begin with.

You essentially erase the key advantages that Bootstrap 3 brings to the table when re-incorporating the stylistic features that Bootstrap 2.3 has integrated into it's CSS.

Bootstrap 3 has place priority over 'rendering performance' (i.e. how fast a browser can render a page), and the CSS used in Bootstrap is designed with that in mind.  So for example, gradients (which take up a lot of browser resources to render) have been dropped in favour of 'flat' design.

Bootstrap 3 CSS and code is bit neater, cleaner - a bit less buggy - but no changes that I know of that 'will rock your world,' so to speak and switching to Bootstrap 3 from 2.3 was rather 'anti-climatic.'

If your number one priority is optimizing rendering speed then Bootstrap 3 is the way to go - but it will cost you dearly in other areas, not only look and feel.

As mentioned above, the Joomla! Project standardized on Bootstap 2.3 for good reason.   (See http://kyleledbetter.com/jui/bootstrap/).

The idea, in a nutshell, is that all extension developers will adhere to a common framework, so when site owners install plug-ins and extensions, those plug-ins and extensions will adopt the over look and feel of the web site.

Because of this, extension developers 'expect' that your template will adhere to, and provide the Bootstrap 2.3 CSS - and your template does not, expect to 'roll up your sleeves and fix code'  when installing 3rd party extensions - as well as other issues which may arise in future 3.x Joomla CMS iterations.

Hope that helps.

Niv
 


--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.

Maik

unread,
Jan 9, 2014, 3:45:35 AM1/9/14
to joomla-de...@googlegroups.com
Hi Niv,

and thx for sharing your experience. That sounds good and iam now less concernd about not using Version3 ;).
thx for that and the Link to the Doc
Maik
Reply all
Reply to author
Forward
0 new messages