Home/ Questions/Q 8597425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T00:54:37+00:00

I’m using the latest version of Bootstrap to style a site and I have

  • 0

I’m using the latest version of Bootstrap to style a site and I have come across what seems like a bug. You can view it here as a JSFiddle.

If I add a standard fixed-position top navbar and then some content after it, the subsequent content gets pulled up by about 60px so it ends up under the top navbar. So I looked at the Bootstrap examples pages and found a bit of inline CSS (in the head section) that is evidently being used to correct this:

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

This surprised me a great deal and I’m wondering if this is the result of an overlooked-bug in Bootstrap or if I should be doing this as a matter of course.

If the latter is the case, I’d be very interested to know why I should use inline CSS when Bootstrap is supposed to be a ready-to-go CSS solution.

And if the former, I’d very much like to know why this is as it is – why doesn’t the Bootstrap CSS just add the padding to the bottom of the navbar or something?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    From the documentation:

    Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

    The .navbar-fixed-top is position: fixed, so a padding will not affect any other element.

    EDIT

    The “between the two .css” advice helps to prevent an issue with mobile devices. As position: fixed is broken on many devices, navbar goes static and the <body> padding creates a blank wrap on the top. So bootstrap-responsive.css overwrites this padding for that viewports.

    You can reproduce that behaviour simply by adding a media query to the rule:

    @media (min-width: 979px) {
    body {
        padding-top: 60px;
    }
}

    Include this rule on your custom stylesheet and forget <style> tags.

    • 0