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

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

i understand stop main container in bootstrap beingness @ top of body, , behind nav bar, must add together padding so:

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

the padding must declared between bootstrap.css , bootstrap-responsive.css in order padding not cause issues on smaller devices , breaking responsiveness of site.

my question:

i'm using combinde bootstrap.css file downwards loaded bootstrap customize, has responsive , normal css combined 1 file.

because combined 1 file means can't utilize solution described @ origin of question without adding prepare bootstrap.css file (i don't want add together in there, long story).

so thinking instead of putting code (with @media prepare smaller devices):

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

into own css file (main.css) , including after bootstrap.css, in html, so:

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

do think solution acceptable?

yes solution acceptable.

so if have combined 1 or 2 bootstrap files in origin , have navigation bar, way avoid 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>

twitter-bootstrap responsive-design navbar