How do I adjust the margin in return?
I am trying to install a div with bootstrap.
My problem is that I need to have a given margin to the left and right of the div. Using col-md-10 I will not get the fields I need. This is more than 10 pixels if the screen is wide.
For example:
<div class="col-md-offset-1 col-md-10">
//contents...
</div>
-------------------------------------
| --------- div --------------
|10px margin 10px margin
| | |
| | |
| -------------------------------
-------------------------------------
Does anyone have any idea how to fix it? Many thanks!
source to share
If I understand you always want to be margin
10px on each side. You can create your own 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 BootplyDemo
Another option could be to custom class in container and use padding
. Try:
<div class="container margin">
<div class="col-xs-12">
//contents...
</div>
</div>
.margin {
width:100%;
padding:0 10px;
}
Another BootplyDemo
source to share
You have to use the class container-fluid
in your main div content.
<div class="container-fluid">
<!-- Contents -->
</div>
What it does is it creates a full-width container with little left and right, top and bottom padding that changes based on the width of your browser.
Hope this helps!
source to share