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?

Answer 1

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>