Why Joomla Bootstrap and official bootstrap have different css?

Question

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:

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?

Answer 1

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