Images

General

Add classes to <img> elements to style images.

<img src="..." class="rounded">
<img src="..." class="cycle">
<img src="..." class="polaroid">
<img src="..." class="rounded polaroid">
<img src="..." class="cycle polaroid">
<img src="..." class="shadow">

Border color

Change border color with built-in classes bd-*

<img src="..." class="rounded bd-amber">
<img src="..." class="polaroid bd-white shadow">
<img src="..." class="polaroid bd-red bg-pink">

Background color

Change background color for polaroid style with built-in classes bg-*

<img src="..." class="rounded bg-cobalt">
<img src="..." class="polaroid bg-amber bd-white shadow">
<img src="..." class="polaroid bg-lightBlue bd-white shadow">

Image size

Set image width with <span1>...<span12> classes.

<img src="..." class="span2">
<img src="..." class="span3">
<img src="..." class="span4">

Image container

Use .image-container class to create additional image presentation.

<div class="image-container">
    <img src="...">
    <div class="overlay">
        ...
    </div>
</div>
<div class="image-container shadow">
    <img src="...">
    <div class="overlay-fluid">
        ...
    </div>
</div>
<div class="image-container selected">
    <img src="...">
</div>