I have implemented a web layout using bootstrap 3. You can view the JSFiddle here. In order to make the layout responsive, I had to structure it in a slightly unconventional way. The final output on small screens includes three information boxes within an 80% width container, each taking up 4 columns. This structure was necessary for responsive functionality. Now, my question is how can I increase the white-space padding between these boxes?
https://i.sstatic.net/dJ7bK.png
<div class="container PageViews">
<div class="row Page2 text-center">
<div class="col-sm-4 padded">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span> </div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span> </div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span> </div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h3>Title 1</h3>
</div>
<div class="col-xs-6 col-sm-12 eqheight1">
<p class>Text 1 </p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h3>Title 2</h3>
</div>
<div class="col-xs-6 col-sm-12 eqheight2">
<p>Text 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h3>Title 3</h3>
</div>
<div class="col-xs-6 col-sm-12 eqheight3">
<p>Text 3</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.Page2 > *:nth-child(-n+3) {
border-bottom: 0;
padding-top: 10px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.Page2 > *:nth-last-child(-n+3) {
border-top: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding-bottom: 2em;
}
.Page2 > * {
border: 5px solid white;
background: #3DBEAF;
}