how to make this layout in bootstrap3? - html

Question

I tried using the following code, but can't make equal margin to each box
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 box"></div>
</div>
<div class="row">
<div class="col-xs-6 box"></div>
<div class="col-xs-6 box">
<div class="row">
<div class="col-xs-12 box"></div>
</div>
<div class="row">
<div class="col-xs-12 box"></div>
</div>
</div>
</div>
</div>

Answer 1

Space between rows
There isn't anything built-in (for version 3 according to the provided tag on question) for that much vertical space, so you'll want to stick with a custom class.
HTML
<div class="row vertical-space">
...
</div>
CSS
.vertical-space{
margin-bottom: 15px;
}
Please note that, if you are putting those images as CSS background-image for the <div class="row">, then you need to replace padding width margin in the above snippet.
Space between columns
You should work with padding on the inner container to gain space between columns.
HTML
<div class="col-xs-6 box">
<div class="row horizontal-space">
...
</div>
</div>
CSS
.horizontal-space{
padding: 0 15px;
}

Answer 2

All bootstrap columns have 15 pixel left and right padding and the rows have -15 pixel margins.
This means that by default the gap between columns will be 30 pixels but the columns at either end will have their outer edges offset into the rows.
What you can do is remove the right (or left) padding from each of your boxes, however you would need to adjust the row to make sure that the padding is compensated for or it will cause horizontal scrolling. You'd also need to add 15 pixels to the bottom of each box to get your vertical gaps. See below.
<div class="container-fluid">
<div class="row box-row">
<div class="col-xs-12 box"></div>
</div>
<div class="row box-row">
<div class="col-xs-6 box"></div>
<div class="col-xs-6 box">
<div class="row box-row">
<div class="col-xs-12 box"></div>
</div>
<div class="row box-row">
<div class="col-xs-12 box"></div>
</div>
</div>
</div>
</div>
And the css would be like this.
.box-row {
margin-right:0;
}
.box {
padding-right:0;
padding-bottom:15px;
}