Why mixing Joomla and Bootstrap may not be a great idea

Bootstrap is one of the most popular front-end development frameworks available today; it speeds-up the development process offers several useful components like navigation, drop-downs, icons and much more. It is essentially a complete solution for creating responsive websites – you don’t need to be a CSS or HTML ninja to achieve a fluid layout with a 12-column grid.

At first glance, it seems like there aren’t any negatives; Bootstrap looks great, it’s easy to use, supports CSS preprocessors like SASS and LESS, provides cross-browser solutions and it’s free; released under the MIT license. But if you take a moment to look closer, you might notice something interesting; no popular CMS uses this kind of frontend development framework in their core, because ultimately it seems that it causes more problems that it fixes.

Bootstrap’s weight

Bootstrap’s minified CSS weighs around 130 KB, which is quite a lot for what is essentially just base elements and grid structure. If you’re actually going to start using Bootstrap in a template, then you’ll need to customize it. By customize, we mean that you’ll need to override styles since it is not possible to modify everything using on LESS variables, which justs adds even more lines to the final CSS code. Then, if you want to be fully compatible with Joomla! you should load the Bootstrap library from the media/jui directory, which means that you will use the full-fat Bootstrap styles even when you don’t need most of them. To add insult to injury, they are loaded on every single page reload, and you’re not even using them!

Bootstrap isn’t just CSS, it’s JavaScript too, which adds an extra 29KB to the overall weight. All in all, you’re looking at a bare minimum of 160 KB to create a template using the default Joomla! Bootstrap library. Now add in your custom styles and override rules, and your CSS may be too heavy to lift, as it were.

Code structure

 

We all know that Bootstrap is not the most semantic framework out there; when you try to build your template, component or module interface using Bootstrap’s fluid layout you will inevitably end-up with a whole bunch of unnecessary DIV elements and classes.

Using Bootstrap makes your code difficult to maintain and harder to read, particularly when trying to identify specific blocks. What’s more, it is nearly impossible to use other methodologies like BEM with the naming conventions of BS classes.

Compatibility

The Bootstrap library has been part of the JUI since Joomla 3.0, which means that the Bootstrap version that you can use with J!3 is 2.3.2. Bootstrap v.3 was release almost a year ago, but no update is available in Joomla! 3.3 to make it compatible. What does this mean? It means that if you are expecting to be able to use the latest version of Bootstrap with Joomla, you’ll be disappointed. There is also one more bit of bad news:

Bootstrap 3 is not backwards compatible with v2.x. — getbootstrap.com

The information above means that there are two options for future development:

One of the upcoming Joomla updates will be recoded totally to support Bootstrap v.3 (hard to believe even for the biggest J! fans) or Joomla will stick with Bootstrap v.2.3.2 for years.

Conflicts

Incompatibility between Bootstrap v.2.3.2 and v.3 is not the only conflict that can cause issues. When a template provider is logical and tries to keep their code clean by avoiding the loading of unnecessary CSS, the only viable solution with Bootstrap is to include their own Bootstrap build with the template. However, this in itself can also cause its own problems. First of all, third-party extension developers don’t often check whether Bootstrap is already loaded, which that there code will load the library from the JUI too, resulting in Bootstrap being loaded twice which creates a huge amount of CSS conflicts.

This kind of confusion is prevalent; since Bootstrap isn’t a requirement of Joomla, responsible developers that wish to use it must second-guess every other template or extension developer; “Will they use Bootstrap too?”, “Can I trust them to include it?”, “If not, can I trust them to check it’s not loaded before loading it?”. It becomes a guessing game.

Since Joomla doesn’t force Bootstrap (and they shouldn’t), then the potential for these issues arising increases. But would forcing Bootstrap help at all? A CMS needs to be flexible, and users should be able to choose from the many frameworks available to find one that works for them; taking away that choice limits Joomla and its users.

Similarity

No matter what kind of layout you choose, whether fluid or static, it will always have 12 columns as a base; despite any amazing design concept your website exhibits it will still bear a lot of similarities to other projects. Take a look at some of the examples below from the lovebootstrap.com website; with the limitations that come with Bootstrap it’s really hard to build a unique responsive layout without overrides. In fact, most users who have a bit of familiarity with Bootstrap who see the large hero image with 3 columns below it with equal width will be put off — even a beginner can create this kind of layout using Bootstrap in half an hour.

Bootstrap website examples
Sample websites selected from lovebootstrap.com

Summary

If Joomla! wants to retain its favorable position as one of the more popular CMSs out there it should strongly consider droping the idea of including Bootstrap. Of course it’s a great solution for hard-code developers who aren’t experienced with creating a pleasant, accessible user interface — when they add just few BS classes it will certainly look better than their own designs! But this is the only real advantage of Bootstrap; for template providers it causes more issues than benefits, and it’s hard to maintain too. With Bootstrap in the core Joomla code having not been updated since it was introduced we may never see Bootstrap v.3 or later versions in J!.

After the huge buzz around Bootstrap support in Joomla 3.0 many customers have assumed that every Joomla extension will use Bootstrap too, but that’s simply not true. Bootstrap is an effective solution for the back-end because it provides a responsive and intuitive interface, but in the front-end there’s no point in forcing anyone to use this framework. If you are a great developer but you don’t have any knowledge about CSS and UI design you are the person who should use Bootstrap — it gives you responsive layout and some base styling which make your extension more user-friendly.

That’s our opinion of the matter anyway. If you can think of a reason to use Bootstrap from a developer’s point of view post it in the comments and let’s have a good old-fashioned debate!

Why mixing Joomla and Bootstrap may not be a great idea 3.965 (79.29%) 28 votes
Share
This article was first published July 23rd, 2014
  • Erick Boileau

    I cannot agree more
    I unset bootstrap everywhere

  • I don’t get the point. I develop/build Joomla templates for all my clients sites in Bootstrap 3. Easy, fast and with mixins f.e. easy to edit and change later to BS4 (or even any other system). And I need only need to write a very small amount of extra code.

    Sites are fast and loading fast. So I don’t agree with the opinion off the writer of this article. And if you think the css and js files are to much, strip the items you don’t need.

  • anirudh7

    As developer I like CSS preprocessors like SASS and LESS, if you don’t have an designers eye It brings beauty to the website with simple steps.

  • Παναγιώτης

    first of all if a 3rd party component dont check if bootstrap is loaded its THEIR fault and not joomla.

    Second..
    as for the Bootstrap CSS Size.. you are somewhat wrong.
    media/jui has a less file folder from which you can fetch and work with the items you want, so the production css will have a size coresponding to your needs. if you DONT want use wells, nav bar, Carousel etc…just don load them!

    • Bratzilla

      But what if I DON’T like Bootstrap? I prefer lighter frameworks that use a LOT less code. I should be able to decide what works best for my installation or extensions (like I used to with earlier Joomla versions).

      And be honest – the bloat of BS is JOOMLA’S problem, NOT the end user. Several third-party developers in fact fought against having BS essentially forced in the front end (and not providing an easy way to switch it off or override it is essentially forcing it on people).

      I personally have done quite a few of my own templates from scratch using different design frameworks via overrides and tricks that took me DAYS of research to piece together from various sources. BUT why should I HAVE to do it this way? I have enough to do without fighting Joomla core on something that should not have been done in the first place.

      I do fully agree with your statement regarding checking if something is loaded. I do that with jQuery. However, I’d like a further solution of enabling developers to just not use BS at all if that is their choice. Bootstrap, Zurb, etc. are meant for site design.

      Sadly, the forced use of Bootstrap in the front end and other changes make Joomla seem in some ways less flexible than version 1.5 or even 1.0,

  • Bratzilla

    For the life of me, I do not understand why anyone sane would want to force Bootstrap into a CMS without the option to easily disable it. I agree with those who say Joomla should have simply had a small, tightly defined core of CSS definitions. Those core definitions would be the ones needed for the CORE extensions (i.e., com_content, modules, etc. ), both front and back, as well as for templates to hook into should developers choose to. The CSS would be unique to Joomla, giving Joomla developers true control over the system.

    Bootstrap could be packed in the core as an OPTIONAL plugin that could be enabled should a developer choose to. Other CSS/frontend frameworks could similarly be added as per the needs of each project. That way, third-party packages like Bootstrap could truly be optional – meaning that disabling them does not destroy core functionality. If a third-party framework gets updated, then no problem – because it is not core. It becomes a matter of (in)convenience, rather than a monumental problem.

    I propose JoomCSS – Joomla CSS for the Joomla core. Small, tight, well-honed and easily extended, overridden or even redefined (especially if LESS / SASS versions are released to developers). This plus the freedom to use your frontend framework of choice via the plugin method would truly set Joomla free IMHO. Rather than the painful and unpleasant experience it has now become (especially if you want to do something truly custom or unique).

  • waltari

    Theres one huge disadvantage. All Bootstrap webs looks the same, period. Theres no creativity involved in ANY BS template out there, thats why no webdesigner likes it, unless some amateur or lazyass. Just buncha same blocks put together – no design involved in any way

  • It’s sure that template maker using own framework, hate bootstrap. Other template compagny using bootstrap Love it.
    I think is so simple to use bootstrap for a component, this permit to not add own javascripts(for modals, dropdown …)
    If all was in bootstrap the live where so beautyfull.

    Another solution is that jlayout handel all types of content, but currently it’s not the case, then the simpliest is to use Bootstrap for now in joomla 3

    • Bratzilla

      Well, yes and no. Yes, the “simplest” thing to do is just use the version of Bootstrap that ships with the core. However, Bootstrap version 2 is a bloat monster. Also Bootstrap 2 is no longer supported by its development team, so it is officially deprecated. Yep, we are being forced to use a DEPRECATED framework in the core.

      So, why hasn’t J! core updated to Bootstrap 3? We are stuck with BS version 2 because version 3 essentially is a rewrite, and many previous style types have to either be removed or renamed (and then testing is required of course). This is nasty, and why Joomla should have simply had its own core styles – like it did back in Version 1 – to handle core functions such as those found in com_content (yeah, try to remove BS from the front end and use the native article system… good times…)

      As things stand now, even if you exclude those of us who do not like Bootstrap, those who do are also not in a good position.

      Regardless of preference or need the point is that everyone is locked into something that is not universally accepted or desired with no easy work around. If you know enough about Joomla templating – and have the patience to search the Internet for hours and sometimes days – you can create your own template “framework” of sorts that completely nullifies Bootstrap and the ton of other bloat in the front end. But why should anyone have to do that simply to disable or override Bootstrap?

      • For joomla 4, Last bootstrap 3 should be integrate by default and follow the BS evolutions

        • Bratzilla

          If you by integrating you mean that Bootstrap 3 should be an option which can be easily enabled or disabled as the webmaster or programmer wishes – and Joomla introduces unique core CSS for its core components such as com_content so that there is no external 3rd party dependency – then yes, I’m all for it. Otherwise, integrating Bootstrap whatever version is just going to lead to the same problems many of us are currently dealing with; namely, being forced to use an external framework we just do not like with no truly clean method of disabling it.

  • MikeA

    Honestly this article does not make a whole lot of sense to me. It
    misses the point that responsive design adds weight, unless you go down
    the route of separate templates / sub-domains for tablet and mobile
    (which most smaller businesses cannot afford to do or maintain).

    Take
    out Bootstrap and you need something else. It’s like saying if we take
    out Joomla the site will be much lighter…………

    A much
    bigger issue is the bloatedness of some of the frameworks, templates and
    modules that sit on top of standard frameworks like Bootstrap.

    • Bratzilla

      Unfortunately, adding Bootstrap did not resolve anything, because Bootstrap was not designed specifically to work with a CMS. It takes real skill and time to pare it down and tailor it to a CMS (which is a sophisticated bit of kit in its own right). Plus, even before this was done, there was an EPIC discussion on Google Groups where SEVERAL third party developers expressed serious concern and issues with this being done; this just proves not everyone is in love with Bootstrap. So, many have flat-out done their own thing (Joostrap, anyone?). The fact that Bootstrap is tied to core functionality front and back has essentially made the prior issue substantially worse.

      I agree completely with the comment about bloat. Bootstrap v2 is a bloat monster; version 3 seems to be a bit better, which is why so many are overriding the core to use it. And for those like me who just are not enamored of Bootstrap, there are several lightweight frameworks that accomplish solid responsive design without all that heft.

      That’s why the best solution is for Joomla to develop its own core CSS for core functionality front and back (plus release the LESS / SASS versions of the core sheet to give third-party devs a chance for real customization). Hey, if these guys can develop J!, I refuse to believe they couldn’t handle making a stylesheet for it. ;)

      J! already has a powerful plugin system – developers can leverage that to plug their own CSS framework of choice. Lightweight core CSS plus the option to use your third party frontend framework of choice via plugin. Everybody wins!

  • Andrew

    The best way is for Joomla to have their own, and to keep it simple and light-weight.

    • Bratzilla

      ^—– this.

      Really, just how much CSS does Joomla really need for core functionality? Anyone remember Joomla 1.0? There used to be core styles, and that made templating so easy. Simple, absolute minimum core CSS specific to Joomla lays a baseline that everyone can readily get behind. KISS and DRY.

  • Andrew

    I know this is an article from 2014, but I just have to comment here as well in total agreement with Gavick’s analysis. Bootstrap in my opinion may be a nice tool for HTML websites, but to be full integrated into Joomla and to make extension developers use it, is a slap in the face for those of us who remember when Mambo code was still deep in the core. It took a long time to get rid of Mambo, but this Bootstrap is just another Mambo, except instead of getting rid of the Mambo, Joomla put it in.

    The Bootstrap in Joomla was a seriously bad move by the developers, and it creates a nightmare trying to design or customize a Joomla template.

    I would really like to see a push by extension and template developers, as well as the end-user, to force Joomla to lose Bootstrap and to make their displeasure known (and I know there are many).

  • Ralf

    I also find a way, to find/replace the old BS2 classes to BS3.
    see here:
    http://www.joostrap.com/support/tutorials-videos/206-boostrap2-to-bootstrap3-super-easy-update

    Maybe this also helps someone.

  • Keith Mountifield

    It’s worth noting that in Joomla 3.3 you can simply override Bootstrap 2.3.2 with Bootstrap 3 using simple template override.

    You’ll only want to do this if you’re creating a bespoke template and are comfortable creating template overrides for components and modules, you may need create a number of them to correct the grid classes. The advantage is that you can create a much more lean version of bootstrap if you don’t need some of the functionality.

    Simply place the the new bootstrap js files in /templates/**MY Template**/js/jui, the css files in /templates/**MY Template**/css and the glyph font files in the /templates/**MY Template**/fonts folder.

    Then to use them in your template load bootstrap using JHtml::_(‘bootstrap.framework’);
    You need to add the styelsheets manually BEFORE your custom CSS

    Using this method also means that jQuery and the required plugins are also loaded.

    Also, you can recreate your custom bootstrap from thier site and just override the ones you placed in your template.

    Hope this helps someone…

    • Andrew

      You can do that but you still have to deal with extensions using Bootstrap. Then there’s the admin side of Joomla that is using it.

      • Hans Müller

        I don’t think the admin side is a problem, since it is independent of the front. So B3 can used in front and BS2 in back. Me, I never bothered changing any styling in the backend …

    • Hans Müller

      This works on simple sites with a few simple extensions. But can cause all sorts of incompatibilities, with css and js. Some extensions (core and added) will work with BS3 the way you describe it, others won’t work without lots of complex overrides. I liked the idea of BS in Joomla core initially. Meanwhile I find it a huge burden. Not because I dislike BS, I use it a lot, but because it is so hard to use BS3 with Joomla on complex sites.

      • Bratzilla

        Spot on. Perfect summary.

  • If we didnt have bootstrap, there still would be some sort of basic code to override right? We would still have every module/plugin/component adding their own css and js files to their respective folders…which will then create compatabiloty issues. If we all used the core bootstrap, then every module/plugin/component wouldn’t need to include so much seperate code, they would just need to provide an override…which would mean a big decrease in overall ‘completed site’ code weight. Cause lets face it, unless you are a developer who writes all their own extensions for Joomla, all the other Joomla users will use components/modules/plugins from various different vendors, and thus there is massive potential for incompatibility issues…and thus this would be one of the biggest reasons why bootstrap was added to the core of Joomla. I think its time we all re-visited the term ‘community’ and we all work together to use the same code base to make life easier for everyone at every level and every stage of development.

    I am of the belief that Bootstrap is a great decision. But we need bootstrap 3 support. i use T3 for this reason. I think we also need to remember who the target market is for Joomla. Joomla is used by may people, but at least what i have come to believe is that Joomla is marketed towards people who have basic to really good css html skills, but dont necessarily have the hardcore php and js skills. While I can appreciate what you are saying Gavick, if everyone would use Bootstrap, we wouldn’t have an issue.

    And fact of the matter, every template developer for Joomla uses their own custom build framework…which shits me off. It means we have to learn their code, which ads extra dev time to our projects. It especially shits me because Joomla decided to use bootstrap, so why can’t we all just move inline with Joomla?

    There are negatives to every framework, code base, code style etc. And these negatives only get worse because everyone (developers) want to go and use their own coding style framework….

    Even if bootstrap wasnt part of the core…every template developer would still use their own framework..and this we would still have the same level of extra css and js files, ot to mention some developers still use mootools…and then we wills till have compatibility issues between templates and joomla and other extensions.

    The easiest solution is for every developer to use the ONE framework..this would make life for everyone so much easier…and lets be honest…boostratp 3 is so much better bootstrap 2…its not even worth comparing the two.

    • I’m guessing you wouldn’t like tools like Susy, allowing folks to build their own framework(s). It’s not really re-inventing the wheel, but rather that power-users prefer to de-bloat for starters, then there is control and other efficiencies to consider. Bootstrap should be de-coupled from the CMS, because why not use Foundation? Or another framework! I would prefer not to use a framework at all for some projects.

  • For sure, it is a real dilemma. I could even live in peace with older BS2, even with two BS versions and double load… if there were no extra MOOTOOLS core & more!!! Visit the login module… and you get MTcore… go to profile and article submission and you get MTmore. (hence the long availability of J3.0 and the recommendation for building new sites with it.)

    Not sure if replacing BS2/JUI with hacks and overrides like T3 is best practice. I have also seen “Joostrap” loading empty BS2 dummy files. is this really the way to go?! Most template(frameworks) and even extension developers jump on BS3.
    On first sight it seems to work in most cases, but you have to fear every minor J3.x.x core update… and you know… it is updated constantly! So, this is the release we can really rely on?! Somehow, the situation leaves a bad taste in my mouth. No matter if it is (still) my favorite system.

    • bkrztuk

      “Not sure if replacing BS2/JUI with hacks and overrides like T3 is best practice”

      That’s the point – why Joomla contains some native front-end framework which force other developer to override or use hacks if they just don’t want to use it. The ideal solution is to provide abstract layer which allows developers to use different frameworks.

      • “… The ideal solution is to provide abstract layer which allows developers to use different frameworks…”
        The current implementation is blessing and curse at the same time. Blessing for the backend make-over… but a curse for frameworks + JUI based extensions. Maybe things were hard to foresee, but it seems also a bit shortsighted and naive.
        AFAIK the “abstract layer” idea is already in discussion and roadmap. These days, things evolve really fast… hopefully this applies to Joomla as well.