2.4. Offset

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>