Changing the margins on Bootstrap 3 for container

Question

I have a site utilizing the bootstrap framework and I want to change the outside margins that are default for Bootstrap's '.container' class.

I want the margins narrower on the outsides, and I want to not have it jump to different sizes based on screen/resolution (For those who use Bootstrap, when the screen gets to a certain size .container class automatically jumps to a different set of margins.)

I just want a consistent margin throughout that I can set.

Answer 1

You can simply override the CSS. However, you should avoid modifying the Bootstrap files directly, as that limits your ability to update the library. Place your own, custom CSS after Bootstrap, and modify it however you choose.

Further, try using SASS or LESS and creating a variable for your margins/padding. Then you can reuse the variable for various breakpoints or custom containers, and have a single point to edit the margins/padding later.

Another good idea is to modify your containers with a custom class, so that the original styles are preserved. For example:

<style type="text/css">
    .container.custom-container {
      padding: 0 50px;
    }
</style>

<div class="container">
  Here's a normal container
</div>

<div class="custom-container container">
  Here's a custom container
</div>

Answer 2

In bootstrap 4, container-fluid gives a full-width container