<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div id="container"> <div id="header"> <h1> Simple Bootsnipp </h1> </div> <div id="content"> <p class="testp btn btn-info pull-right"></p> <p> <a href="http://bootsnipp.com/user/snippets/oPomM" target="_blank">View Full Screen</a> </p> <h2> Instructions </h2> <p> Create a simple bootsnip with <b>one column</b>. </p> <p> Place a <i>very large image</i> in it, use the responsive class </p> <div class="visible-lg"> <img src="http://fc01.deviantart.net/fs70/f/2015/041/2/6/pcbig_by_uniquelymaud-d8hhis7.png" alt="" class="img-responsive img-rounded center-block"> </div> <div class="visible-md"> <img src="http://fc02.deviantart.net/fs70/f/2015/041/a/f/pcnorm_by_uniquelymaud-d8hhirw.png" alt="" class="img-responsive img-rounded center-block"> </div> <div class="visible-sm"> <img src="http://fc03.deviantart.net/fs71/f/2015/041/7/2/pcsmall_by_uniquelymaud-d8hhirl.png" alt="" class="img-responsive img-rounded center-block"> </div> <div class="visible-xs"> <img src="http://fc03.deviantart.net/fs70/f/2015/041/4/3/pctiny_by_uniquelymaud-d8hhiri.png" alt="" class="img-responsive img-rounded center-block"> </div> <small>Image: <a href="http://powerscourt.com/media/main-view-c2.jpg" target="_blank">Powerscourt Gardens</a><br> </div> <div id="footer"> <div align="center"> Copyright © simpleBootstrap, 2014 </div> </div> </div>

#container { margin: 0 auto; /* width: 600px; */ background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; } #img { padding:30px } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; }

/* * How to detect browser width * Ref: http://bootsnipp.com/mrmccormack/snippets/4PK2 */ $(window).ready(function() { var wi = $(window).width(); $("p.testp").text('Initial screen width is: ' + wi + 'px.'); $(window).resize(function() { var wi = $(window).width(); $("p.testp").text('Width is currently: ' + wi + 'px.'); }); });