"Responsive Screen Scroller"
Bootstrap 3.2.0 Snippet by Siraj

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Proofs</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="text-center">Ask Me Questions On Twitter</h1> <div class="twitter"> <a href="https://twitter.com/TweetOmarNow" class="twitter-follow-button" data-show-count="false" data-lang="en" data-size="large">Questions</a> </div> <h1 class="text-center"><small>Return to <a href="www.OmarHabash.com">www.OmarHabash.com</a></small> </h1> <hr> <br> <ul class="list-inline text-center"> <li><a href="#g-site1">CloudMatrix</a></li> <li><a href="#g-site2"> | Nova Dental</a></li> </ul> <div class="row"> <!-- content --> <br> <br> <!--=================================================== site1 ===================================================--> <div id="g-site1" class="col-xs-12"> <div class="demo-container"> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#site1"> <i class="fa fa-search-plus"></i> </button> <div class="mac"> <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/mac.png" alt="" /> <div class="screen"> <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="" /> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="site1" tabindex="-1" role="dialog" aria-labelledby="site1Label" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content1"> <div class="modal-body"> <img class="img-responsive site" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt=""> </div> </div> </div> </div> <!--=================================================== site1 END ===================================================--> <!--=================================================== site2 ===================================================--> <div id="g-site2" class="col-xs-12"> <div class="demo-container"> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#site2"> <i class="fa fa-search-plus"></i> </button> <div class="mac"> <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/mac.png" alt="" /> <div class="screen"> <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/site2.jpg" alt="" /> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="site2" tabindex="-1" role="dialog" aria-labelledby="site2Label" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content1"> <div class="modal-body"> <img class="img-responsive site" src="http://omarhabash.com/sites/assets/img/sites/site2.jpg" alt=""> </div> </div> </div> </div> <!--=================================================== site1 END ===================================================--> <!-- content END --> </div> </div> </body> </html>
body {padding: 50px;} /* demo only */ img.site { border: 4px solid #ccc; } .demo-container { overflow: hidden; position: relative; } .mac { position: relative; margin: -5.3% -20.5% 0 -18.5%; /* demo only--accounts for image whitespace */ } .screen { position: absolute; top: 9%; /* demo only--accounts for image whitespace */ right: 17%; /* demo only--accounts for image whitespace */ left: 15.6%; /* demo only--accounts for image whitespace */ height: 58%; overflow: auto; } button.btn.btn-primary.btn-lg { /* margin-left: 9.9em; */ /* margin-top: 26.5em; */ position: absolute; z-index: 1; bottom: 25%; left: 0; /* width: 9%; */ margin-left: 47%; box-shadow: 1px 1px 1px; } .twitter { width: 17%; margin: 0 auto; }

Related: See More

BLK• Design System
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Login screen pure Bootstrap 4.0

Questions / Comments: