Twitter Bootstrap Question posted in

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 container 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 container class in bootstrap. For example something similar too

.addThisClassToTagWithClassContainer {
     max-margin-top:5%;
     max-margin-bottom:5%;
     max-margin-left:5%;
     max-margin-right:5%;
}

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

Tags:

2

Answers


  1. 0

    The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.

    If you want to work with the full width of the screen, use .container-fluid:

    <body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search