Dan Dan - 1 year ago 132
Javascript Question

How to prevent Twitter Bootstrap changing margins as width of page is extended

I was practising with the Bootstrap 3 css. I planed on having a fixed footer and a fixed navigation bar on my webpage. So to do this I used margins of 5% to make the content in the middle of my page to not be covered by the footer or header. To format the text I am using the

class which comes with bootstrap. This can be seen in the picture below.

enter image description here

This looked as it should. However I soon discovered that when the width of the page is expanded it increases the margin size. Like in the picture shown below.

enter image description here

So is there a way to limit how much the margins can extend on the
class in bootstrap. For example something similar too

.addThisClassToTagWithClassContainer {

There is a copy of the files here if you believe this is a coding error that I have made.

Answer Source

This isn't exactly a bootstrap issue - when you set padding and margin as a % value, like in your example, the % is calculated from the width of the containing element. If you want to set a fixed height, you can use px, or if you want it to be a consistent size relative to the height of the viewport instead, you can use vh (5vh is equal to 5/100 -- or 5% -- of the viewport height).

Typically, this would be a case for px simply because on a small screen, 5vh could be very small, and usually a navbar, for instance, would stay a pretty consistent size regardless of how tall the window is.

So something like this is probably your most likely approach:

.page-body {
  margin-top: 100px; /* some number equal to the height of navbar */  
  margin-bottom: 150px; /* some number equal to the height of footer */  

But if you do actually want to have it be relative to the height of the window, you can do this (You will probably need a higher number than 5, here to make similar to your screenshot.):

.page-body {
  margin-top: 5vh;   
  margin-bottom: 5vh;

You should find either approach will prevent your margins from changing when the width of the page changes.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download