Question

The starter template for bootstrap css includes the following inline:

body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

What practical reasons are there for including this style in-line, while all the other code is in an external .css file?

Answer 1

The inline style was deliberately inserted between bootstrap.css and bootstrap-responsive.css. Moving it to main.css (and so after bootstrap-responsive.css) will show the padding above the black menu bar when it adjusts to a smaller window, at least in IE 10 and Chrome 22.

Ideally it should have been added to bootstrap.css but it wasn’t for some reason.

Another solution would be to put it in a separate css file but that would require downloading an additional very small file.

Loading main.css between the two bootstrap*.css files would make it more difficult to override specific settings.

So I presume it’s a compromise.