Bootstrap3 Image
Dummy image with holder
holder is javascript library to create dummy image.
Download and save holder.js in your project.
How to use
Please read holder git hub page.
<img class="media-object" data-src="holder.js/100x100" alt="dummy">
100×100 image is generated
Example
You also need include holder.js
<div class="container"> <div class="pull-left"> <img class="media-object" data-src="holder.js/100x100" alt="dummy"> </div> <div class="media-body"> <h4>Title</h4> Memo </div> </div> <script src="holder.js"></script>
Media Object
Show caption and detail message
Example is above.
Media list
<div class="container"> <ul class="media-list"> <li class="media"> <div class="pull-left"> <img class="media-object" data-src="holder.js/100x100" alt="dummy"> </div> <div class="media-body"> <h4 class="media-heading">Title</h4> <p>Description</p> <button class="btn btn-default pull-right">Details</button> </div> </li> <li class="media"> <div class="pull-left"> <img class="media-object" data-src="holder.js/100x100" alt="dummy"> </div> <div class="media-body"> <h4 class="media-heading">Title2</h4> <p>Description2</p> <button class="btn btn-default pull-right">Details2</button> </div> </li> </div>
Thumbnail
Use thumbnail and caption class in div
<div class="container"> <div class="row"> <div class="col-xs-4"> <div class="thumbnail" style="height:350px"> <img data-src="holder.js/100x100" alt="dummy"> <div class="caption"> <h4>Title</h4> <p>Description</p> <button class="btn btn-default">Detail</button> </div> </div> </div> <div class="col-xs-4"> <div class="thumbnail" style="height:350px"> <img data-src="holder.js/100x200" alt="dummy"> <div class="caption"> <h4>Title2</h4> <p>Description2</p> <button class="btn btn-default">Detail</button> </div> </div> </div> </div> </div>