<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Submitted sometime March 21, 2014 --> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Real-time website thumbnails</h2> <span class="text-danger">Please wait while thumbnails are generated</span> <p>Note: For demonstration, these are set to refresh every 14 days: <code>&cacheLimit=14</code></p> <hr> </div><!-- ./col-mid-12 --> </div><!-- ./row --> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="http://cnn.com" class="thumbnail"> <img src="http://api.screenshotmachine.com/?key=342eb4&url=http://cnn.com&cacheLimit=14" alt="cnn.com"> </a> <p class="text-center"> <img src="http://g.etfv.co/http://www.cnn.com" alt="cnn.com" width="16" height="16" />   <a href="http://cnn.com"> CNN.com News</a> </p> </div> <!-- ./col-xs-6 --> <div class="col-xs-6 col-md-3"> <a href="http://abcnews.go.com" class="thumbnail"> <img src="http://api.screenshotmachine.com/?key=342eb4&url=http://abcnews.go.com/&cacheLimit=14" alt="ABC News"> </a> <p class="text-center"> <img src="http://g.etfv.co/http://abcnews.go.com" alt="abc" width="16" height="16" />   <a href="http://abcnews.go.com"> ABC News</a> </p> </div> <!-- ./col-xs-6 --> <div class="col-xs-6 col-md-3"> <a href="http://www.nbc.com" class="thumbnail"> <img src="http://api.screenshotmachine.com/?key=342eb4&url=http://www.nbc.com/&cacheLimit=14" alt="NBC"> </a> <p class="text-center"> <img src="http://g.etfv.co/http://www.nbc.com" alt="nbc" width="16" height="16" />   <a href="http://www.nbc.com"> NBC News</a> </p> </div> <!-- ./col-xs-6 --> <div class="col-xs-6 col-md-3"> <a href="http://www.foxnews.com/" class="thumbnail"> <img src="http://api.screenshotmachine.com/?key=342eb4&url=http://www.foxnews.com/&cacheLimit=14" alt="Fox News"> </a> <p class="text-center"> <img src="http://g.etfv.co/http://www.foxnews.com" alt="Fox News" width="16" height="16" />   <a href="http://www.foxnews.com/"> Fox News</a> </p> </div> <!-- ./col-xs-6 --> </div><!-- ./row --> <div class="row"> <div class="col-md-12"> <p><br> <a href="http://screenshotmachine.com/">Get your API key to make your own thumbnails (FREE)</a> <br><br> <a href="http://validator.w3.org/check?uri=http%3a%2f%2fbootsnipp.com%2fiframe%2f8G8o;ss=1"><span class="glyphicon glyphicon-check" style="color: #339900;"></span><small> HTML</small>⁵</a> </p> <p>Example of larger thumb:</p> <img src="https://www.screenshotmachine.com/serve.php?img=cnn-com-480x800mob-b74046.png" alt=""> </div><!-- ./col-mid-12 --> </div><!-- ./row --> </div><!-- ./container -->

body{ margin-top:24px; } /* remove border from thumbs, override Bootstraps CSS Ref: http://jsfiddle.net/jonschlinkert/4NQTp/4/ */ .thumbnail, .thumbnail:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; }