Example
Wave Holiday View

Adapting to the homeowner's needs.

Each Wave control is supplied with a pre-set programme that can then be easily modified to suit the user's requirements.

The Wave is highly adaptable and can be programmed to 'pair' with up to eight devices, which it automatically sense when people are at home.

The following only float at sm level

A Title

Bill Murray

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe maxime sequi alias voluptatibus illum sint harum consequatur quam nesciunt quasi eligendi dicta, reiciendis at voluptatem, praesentium, provident blanditiis enim quidem.

A Title

Bill Murray

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe maxime sequi alias voluptatibus illum sint harum consequatur quam nesciunt quasi eligendi dicta, reiciendis at voluptatem, praesentium, provident blanditiis enim quidem.

A Title

Bill Murray

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe maxime sequi alias voluptatibus illum sint harum consequatur quam nesciunt quasi eligendi dicta, reiciendis at voluptatem, praesentium, provident blanditiis enim quidem.

<div class="grid grid-two-col grid-col-left grid-swap">
    <div class="grid-col">
        <img class="img-right" src="http://fillmurray.com/250/300" alt="Wave Holiday View">
    </div>
    <div class="grid-col">
        <h2 class="band-title">Adapting to the homeowner's needs.</h2>
        <p>Each Wave control is supplied with a pre-set programme that can then be easily modified to suit the user's requirements.</p>
        <p>The Wave is highly adaptable and can be programmed to 'pair' with up to eight devices, which it automatically sense when people are at home.</p>
    </div>
</div>
<h2 class="band-title">The following only float at sm level</h2>
<div class="grid grid-three-col">
    <div class="grid-col">
        <h3>A Title</h3>
        <img src="http://fillmurray.com/250/200" class="img img-responsive img-sm-right center-block" alt="Bill Murray">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe maxime sequi alias voluptatibus illum sint harum consequatur quam nesciunt quasi eligendi dicta, reiciendis at voluptatem, praesentium, provident blanditiis enim quidem.</p>
    </div>
    <div class="grid-col">
        <h3>A Title</h3>
        <img src="http://fillmurray.com/250/200" class="img img-responsive img-sm-right center-block" alt="Bill Murray">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe maxime sequi alias voluptatibus illum sint harum consequatur quam nesciunt quasi eligendi dicta, reiciendis at voluptatem, praesentium, provident blanditiis enim quidem.</p>
    </div>
    <div class="grid-col">
        <h3>A Title</h3>
        <img src="http://fillmurray.com/250/200" class="img img-responsive img-sm-right center-block" alt="Bill Murray">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe maxime sequi alias voluptatibus illum sint harum consequatur quam nesciunt quasi eligendi dicta, reiciendis at voluptatem, praesentium, provident blanditiis enim quidem.</p>
    </div>
</div>

22.2 #permalink Img Nav

Images that can have an active state and are designed to be clicked

Examples
Default styling
.active
Active state
<img
    class="img-nav [modifier class]"
    src="http://fillmurray.com/100/100"
>

22.3 #permalink Img Frame

Images that are framed to pull the off the page.

Example
<div style="padding: 50px;">
    <img
        class="img-responsive img-frame"
        src="http://fillmurray.com/250/250"
    >
</div>

22.4 #permalink Img Contain

Can override the height/width with inline style

Example
#
<div class="img-contain">
    <img src="#" alt="#"/>
</div>