1

I am using Joomla 3.2.1 and I did a MVC component and a menu to it so now in /components/com_MY_COMPONENT_NAME/views/ONE_VIEW_NAME/tmpl/default.php I can write any HTML/PHP I want.

I have been doing tests of some bootstrap examples and I realize that the CSS is not exactly the same.

Eg. Button btn btn-primary must has (inspecting with fire-bug in bootstrap's website):

background-color: #006DCC;
background-image: linear-gradient(#08C, #04C);

But... trying the same (coping the whole table) on my Joomla I see that the css is:

background-color: #206991;
background-image: none;

Here the result:

enter image description here

You can appreciate that the font-size is different, but also are line-height, border-radius and margin-bottom

This may sound quite trivial, but the point is why are different. If I continue using bootstrap classes I may find some unexpected behaviours/problems.

There is no joomla template that ensures me that using bootstrap like the original?

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Mikel
  • 5,902
  • 5
  • 34
  • 49
  • Lodder's answer is correct. If you need the latest version of Bootstrap in Joomla today, take a look at some of the third-party templates like http://www.joostrap.com/ that implement Bootstrap 3. – betweenbrain Apr 29 '14 at 13:54
  • Thank you, yes I thought that Joomla 3 has Bootstrap 3, but no. – Mikel Apr 29 '14 at 15:02

1 Answers1

2

Simple answer. As Bootstrap has been progressing, then went for a new sort of style since version 3. They've gone for a more of a flat UI style.

Joomla still has Bootstrap 2.3.2 and therefore uses the older style which isn't flat. Updating the Bootstrap files on your server will be an extremely big task as so many things we're changes, for example the grid class names. I'm not sure when Bootstrap 3 will be used but I assume it might come with Joomla 4.x

Lodder
  • 19,758
  • 10
  • 59
  • 100
  • Add to this the fact that Bootstrap is made to be very customizable and has a variables.less file in the media/jui/bootstrap/less directory. That's probably from Bootstrap's distributed variables.less file, which is also different from the template's variable.less file. So there's a ton of reasons why this will never match up that way. – Chad Windnagle Apr 30 '14 at 03:10