How To Setup Margin Responsively?

I am trying to setup a div with bootstrap. My problem is that I need to have a set margin on the left and right of the div. By using col-md-10 doesn't get me the margin I need. It'

Solution 1:

If I understand you want always a margin value of 10px at each side. You can create a custom class and use calc(), try this:

<div class="col-md-offset-1 col-md-10 margin">
    //contents...
</div>

.margin {
   margin:0 10px;
   width:calc(100% - 20px);
}

Check this BootplyDemo

---

Another Option could be a custom class on the container and use padding. Try:

<divclass="container margin"><divclass="col-xs-12">
        //contents...
    </div></div>

.margin {
  width:100%;
  padding:0 10px;
}

Another BootplyDemo

Solution 2:

You should be using the container-fluid class on your main content div.

<divclass="container-fluid"><!-- Contents --></div>

What this does is creates a full-width container with a bit of padding on the right and left, top and bottom that responsively resizes based on the width of your browser.

Hope this helps!