"Web Browser Toolbar (Responsive) v1"
Bootstrap 3.3.0 Snippet by mattiasghodsian

<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 class="container"> <div class="row features-products"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="web-bar"> <div class="btn-bar"></div> <div class="btn-bar"></div> <div class="btn-bar"></div> </div> <img src="http://i.imgur.com/rKZdv8V.jpg" class="img-responsive"> </div> <div class="col-md-6 col-sm-12 col-xs-12 features-products-header"> <div class="title">Luke + Sara</div> <p> A professionally crafted, high-end portfolio theme with a fresh, natural design inspired by stunning photography and clean, bold typography. </p> <a href="#" class="btn btn-success">READ MORE</a> <a href="#" class="btn btn-info">VIEW SITE</a> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="web-bar"> <div class="btn-bar"></div> <div class="btn-bar"></div> <div class="btn-bar"></div> </div> <img src="http://i.imgur.com/sQTCK3g.jpg" class="img-responsive"> </div> <div class="col-md-6 col-sm-12 col-xs-12 features-products-header"> <div class="title">Nexxoz</div> <p> A professionally Site under construction theme. </p> <a href="#" class="btn btn-success">READ MORE</a> <a href="#" class="btn btn-info">VIEW SITE</a> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="web-bar"> <div class="btn-bar"></div> <div class="btn-bar"></div> <div class="btn-bar"></div> </div> <img src="http://i.imgur.com/ZuVznGL.jpg" class="img-responsive"> </div> <div class="col-md-6 col-sm-12 col-xs-12 features-products-header"> <div class="title">Aine</div> <p> A professionally bolg theme, high-end portfolio theme with a fresh, natural design inspired. </p> <a href="#" class="btn btn-success">READ MORE</a> <a href="#" class="btn btn-info">VIEW SITE</a> </div> </div> </div> </div>
body{ background: #c2c2c2; } .row > .col-md-12 { margin-top:15px; margin-bottom:15px; } /* COPY CSS BELOW THIS NOTER*/ .features-products .web-bar{ background: #555555; width: 100%; height: 20px; display: block; } .features-products .web-bar .btn-bar{ width: 9px; height: 9px; background: #fff; border:1px solid #fff; border-radius: 9px; margin-right: 6px; display: block; float: left; margin-top: 5px; } .features-products .web-bar .btn-bar:nth-child(2){ background: #f0ad4e; border-color: #f0ad4e; } .features-products .web-bar .btn-bar:nth-child(3){ background: #1abc9c; border-color: #1abc9c; } .features-products .web-bar .btn-bar:first-child{ margin-left: 10px; background: #d9534f; border-color: #d9534f; } .features-products .features-products-header .title{ font-size: 30px; margin-bottom: 20px; }

Related: See More


Questions / Comments: