Simple helper for providing additional margin.
Example
Left Offset
There is a gap between me and the icon.
This gap is a bit larger.
Right Offset
There is a gap between me and the icon.
This gap is a bit larger.
Top Offset
I have small top spacing.
I have some regular top spacing.
I have big top spacing!
I have HUGE top spacing!
I have no top spacing :/.
Bottom Offset
I have small bottom spacing.
I have some regular bottom spacing. Just like a real paragraph, weehoo!
I have big bottom spacing!
I have HUGE bottom spacing!
I have no bottom spacing :/.
<div class="row offset-bottom">
<div class="col-sm-6">
<h4>Left Offset</h4>
<p>
There is a gap between me and the icon.
<span class="glyphicon glyphicon-tree-conifer offset-left" aria-hidden="true"></span>
</p>
<p>
This gap is a bit larger.
<span class="glyphicon glyphicon-tree-conifer offset-left-large" aria-hidden="true"></span>
</p>
</div>
<div class="col-sm-6">
<h4>Right Offset</h4>
<p>
<span class="glyphicon glyphicon-tree-deciduous offset-right" aria-hidden="true"></span>
There is a gap between me and the icon.
</p>
<p>
<span class="glyphicon glyphicon-tree-deciduous offset-right-large" aria-hidden="true"></span>
This gap is a bit larger.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>Top Offset</h4>
<div class="offset-top-small">I have small top spacing.</div>
<div class="offset-top">I have some regular top spacing.</div>
<div class="offset-top-large">I have big top spacing!</div>
<div class="offset-top-larger">I have HUGE top spacing!</div>
<p class="offset-top-none">I have no top spacing :/.</p>
</div>
<div class="col-sm-6">
<h4>Bottom Offset</h4>
<div class="offset-bottom-small">I have small bottom spacing.</div>
<div class="offset-bottom">I have some regular bottom spacing. Just like a real paragraph, weehoo!</div>
<div class="offset-bottom-large">I have big bottom spacing!</div>
<div class="offset-bottom-larger">I have HUGE bottom spacing!</div>
<p class="offset-bottom-none">I have no bottom spacing :/.</p>
</div>
</div>