Images

General

Add classes to an <img> element to easily style images in any project.

<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

You can change border color with build-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

You can change background color for polaroid style with build-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

Also you can set width of image with <span1>...<span12> classes.

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

Image container

You can use class .image-container to create additional image presentation.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<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>