Correct way to add padding to Bootstrap body to prevent content and header overlap

Question

I understand that to stop the main container in Bootstrap from being at the top of the body, and behind the nav bar, you must add padding like so:

<link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

The padding must be declared between the bootstrap.css and the bootstrap-responsive.css in order for the padding not to cause issues on smaller devices and thus breaking the responsiveness of the site.

My Question:

I'm using the combinde bootstrap.css file down loaded from Bootstrap customize, which has the responsive and the normal css combined into one file.

Because they are combined into one file it means I can't use the solution I described at the beginning of this question without actually adding the fix into the bootstrap.css file (I don't want to add it in there, long story).

So I was thinking instead of putting this code (with a @media fix for smaller devices):

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

into my own css file (main.css) and including it after the bootstrap.css, in the html, like so:

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">

Do you think this solution is acceptable?

score 46 · Accepted Answer · answered Feb 14 '13 at 13:09

46

Yes your solution is acceptable.

So if you have the combined one or the two Bootstrap files in the beginning and you would like to have the navigation bar, this is the way to avoid the big padding when on smaller screens:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
  body {
    padding-top: 60px;
  }
  @media (max-width: 980px) {
    body {
      padding-top: 0;
    }
  }
</style>

answered Feb 14 '13 at 13:09

Lipis

21,388
20
94
121

3

Technically you want `@media (max-width: 979px) {` since twitter bootstrap goes into default mode at 980px and up. See http://twitter.github.io/bootstrap/scaffolding.html#responsive – bendytree Apr 18 '13 at 17:37
Technically technically `@media (min-width: 768px) and (max-width: 979px) { ... }` – Brock Hensley May 17 '13 at 14:41

score 4 · Answer 2 · answered Apr 15 '13 at 13:37

In Bootstrap 2.3.x we can fix this padding with CSS:

body > .container {
  padding-top: 40px;
  background-color: white;
}

/*
 * Responsive stypes
 */
@media (max-width: 980px) {

  body > .container {
    padding-top: 0;
  }
  .navbar-fixed-top {
    margin-bottom: 0;
  }

} /* END: @media (max-width: 980px) */

with HTML file look like this

<html>
<body>

  <div class="navbar navbar-fixed-top">
   ...
  </div>

  <div class="container">
   ...
  </div>

</body>
</html>

In Twitter responsice CSS file the top menu line has class="navbar-fixed-top" with margin-bottom: 20px; when screen width less then 980px.

Hope that this can help someone.

Correct way to add padding to Bootstrap body to prevent content and header overlap

My Question:

2 Answers2