Home of free code snippets for Bootstrap

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <meta name="msvalidate.01" content="36A28D9109C077BA3E623651FC1656F4" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="fb:admins" content="19908503" /> <meta property="fb:app_id" content="112989545392380" /> <meta property="og:title" content="HTML Snippets for Twitter Boostrap framework : Bootsnipp.com" /> <meta property="og:type" content="website" /> <meta property="twitter:account_id" content="786331568" /> <meta itemprop="name" content="Bootsnipp"> <meta itemprop="description" content="Free HTML snippets for Bootstrap HTML CSS JS"> <meta property="og:url" content="https://bootsnipp.com" /> <meta property="og:image" content="https://bootsnipp.com/img/logo.jpg" /> <meta property="og:site_name" content="Bootsnipp.com" /> <meta property="og:description" content="A design element gallery for web designers and web developers. Find snippets using HTML, CSS, Javascript, jQuery, and Bootstrap." /> <meta name="description" content="A design element gallery for web designers and web developers. Find snippets using HTML, CSS, Javascript, jQuery, and Bootstrap"> <title>Home of free code snippets for Bootstrap</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <link rel="shortcut icon" href="//d2d3qesrx8xj6s.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="icon" href="//d2d3qesrx8xj6s.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-144x144-precomposed.png"> <link rel="alternate" type="application/rss+xml" title="Latest snippets from Bootsnipp.com" href="https://bootsnipp.com/feed.rss" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">  <link rel="stylesheet" href="/dist/bootsnipp.min.css">   <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-55581850-1', 'auto', {'allowLinker': true}); ga('require', 'linker'); ga('linker:autoLink', ['danstools.com','unixtimestamp.com','url-encode-decode.com','cssfontstack.com','hexcolortool.com','htaccessredirect.net','jspretty.com','jsmini.com','jsobfuscate.com','md5hashgenerator.com','regextester.com','cleancss.com','favicon-generator.org','website-performance.org','permissions-calculator.org','conversoes.org','convertissez.fr','convertitore.net','elconvertidor.com','files-conversion.com','henkan-muryo.com','konvertirung.org','konvertor.org','tahwil.net','zhuan-huan.com','bootsnipp.com'] ); ga('send', 'pageview'); window.onload = function() { /* $('body').append('<script type="text/javascript" src="https://srv.buysellads.com/ads/CVADLKQJ.json?callback=drop_ad" async><\/script>'); $('body').append("<style>.bsa-apiads {\ line-height: 1.5;\ display: inline-block;\ float: left;\ font-size: 12px;\ background-color: #5A8DB6;\ border: solid 1px #337799;\ box-shadow: inset 0 1px hsla(0, 0%, 100%, .1);\ box-sizing: border-box;\ background-image: url('http://www.danstools.com/devops/img/devoops_pattern_b10.png');\ margin: 1em 1em 0 2em;\ border-radius: 4px;\ text-align: center;\ padding: .25em;\ }\ \ .bsa-apiads a:before {\ margin-right: 4px;\ padding: 2px 6px;\ border-radius: 3px;\ background-color: #58B668;\ color: #fff;\ content: 'Ad';\ }\ \ .bsa-apiads a {\ color: #fff;\ }\ \ .bsa-apiads a:hover {\ color: inherit;\ }</style>");*/ setTimeout(function() { var ad = document.querySelector(".bsap_ac1f95c148ce6148393fd34e69a52240"); var promos = document.querySelectorAll(".l26ul"); var isblock = 0; for (var i = 0; i < promos.length; i++) { var promo = promos[i]; if (isblock ==1 || (ad && ad.innerHTML.replace(/\s/g, "").length == 0)) { isblock = 1; // ad.style.cssText = 'display:block !important'; // promo.style.cssText = 'display:none !important'; promo.innerHTML = ''; promo.style.display= 'inline-block'; promo.style.visibility= 'visible'; promo.style.maxWidth= ''; } else if (promo) { promo.innerHTML = ''; // var promotwo = document.querySelector("#toppromo2"); promo.childNodes[0].childNodes[0].style.width= ''; } } }, 1000); }; </script> <script type="text/javascript"> var fb_param = {}; fb_param.pixel_id = '6007046190250'; fb_param.value = '0.00'; (function(){ var fpw = document.createElement('script'); fpw.async = true; fpw.src = '//connect.facebook.net/en_US/fp.js'; var ref = document.getElementsByTagName('script')[0]; ref.parentNode.insertBefore(fpw, ref); })(); </script> <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=6007046190250&value=0" /></noscript> </head> <body>  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>  <nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation" style="z-index: 9999999"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="animbrand"> <a class="navbar-brand animate" href="https://bootsnipp.com">Bootsnipp</a> </div> </div>   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-left"> <li> <a href="#" class="dropdown-toggle " data-toggle="dropdown">Bootstrap <span class="caret"></span> <span style="font-size:.5em; position:absolute; top:3px; left:2px">For</span> </a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">CSS Frameworks</li> <li class="active"><a href="/" class="">Bootstrap</a></li> <li class=""><a href="/foundation" class="">Foundation</a></li> <li class=""><a href="/semanticui" class="">Semantic UI</a></li> <li class=""><a href="/materialize" class="">Materialize</a></li> <li class=""><a href="/purecss" class="">Pure</a></li> <li class=""><a href="/bulma" class="">Bulma</a></li> <li class="dropdown-header">References</li> <li class=""><a href="/cssref" class="">CSS Reference</a></li>  </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class=""> <form action="https://bootsnipp.com/search" method="GET" role="search"> <input style="width:100%;margin-top:10px;" type="text" class="input-sm form-control" name="q" placeholder="Search for snippets"> </form> </li>    <li> <a href="#" class="dropdown-toggle " data-toggle="dropdown">Tools <span class="caret"></span></a> <ul class="dropdown-menu" role="menu">  <li class=""><a href="https://bootsnipp.com/forum/bootstrap" class="">Community</a></li> <li class=""><a href="https://bootsnipp.com/builder" class="">Page Builder <span class="pull-right glyphicon glyphicon-modal-window"></span></a></li> <li class=""><a href="https://bootsnipp.com/forms" class="">Form Builder <span class="pull-right glyphicon glyphicon-tasks"></span></a></li> <li class=""><a href="https://bootsnipp.com/buttons" class="">Button Builder <span class="pull-right glyphicon glyphicon-edit"></span></a></li> <li class=""><a href="https://bootsnipp.com/iconsearch" class="">Icon Search <span class="pull-right glyphicon glyphicon-search"></span></a></li> <li class="dropdown-header">Dan's Tools</li> <li class=""><a href="http://www.cleancss.com/diff-compare-merge/" class="">Diff / Merge <span class="pull-right glyphicon glyphicon-transfer"></span></a></li> <li class=""><a href="http://www.hexcolortool.com/" class="">Color Picker <span class="pull-right glyphicon glyphicon-pencil"></span></a></li> <li class=""><a href="http://www.danstools.com/keyword-tool/" class="">Keyword Tool <span class="pull-right glyphicon glyphicon-list-alt"></span></a></li> <li class=""><a href="http://www.cssfontstack.com/Web-Fonts" class="">Web Fonts <span class="pull-right glyphicon glyphicon-font"></span></a></li> <li class=""><a href="http://www.htaccessredirect.net/" class="">.htaccess Generator <span class="pull-right glyphicon glyphicon-console"></span></a></li> <li class=""><a href="http://www.favicon-generator.org/" class="">Favicon Generator <span class="pull-right glyphicon glyphicon-picture"></span></a></li> <li class=""><a href="http://www.website-performance.org/" class="">Site Speed Test <span class="pull-right glyphicon glyphicon-dashboard"></span></a></li> </ul> </li> <li class="dropdown"> <a href="https://bootsnipp.com/snippets" class="dropdown-toggle " data-toggle="dropdown">Snippets <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class=""><a href="https://bootsnipp.com" class="">Featured <span class="pull-right glyphicon glyphicon-star"></span></a></li> <li class=""><a href="https://bootsnipp.com/tags" class="">Tags <span class="pull-right glyphicon glyphicon-tags"></span></a></li> <li class="dropdown-header">By Bootstrap Version</li> <li><a href="https://bootsnipp.com/tags/4.1.1" class="">4.1.1</a></li> <li><a href="https://bootsnipp.com/tags/4.0.0" class="">4.0.0</a></li> <li><a href="https://bootsnipp.com/tags/3.3.0" class="">3.3.0</a></li> <li><a href="https://bootsnipp.com/tags/3.2.0" class="">3.2.0</a></li> <li><a href="https://bootsnipp.com/tags/3.1.0" class="">3.1.0</a></li> <li><a href="https://bootsnipp.com/tags/3.0.3" class="">3.0.3</a></li> <li><a href="https://bootsnipp.com/tags/3.0.1" class="">3.0.1</a></li> <li><a href="https://bootsnipp.com/tags/3.0.0" class="">3.0.0</a></li> <li><a href="https://bootsnipp.com/tags/2.3.2" class="">2.3.2</a></li> </ul> </li> <li class=""><a href="https://bootsnipp.com/register" class="">Register</a></li> <li id="nav-login-btn" class=""><a href="https://bootsnipp.com/login" class="">Login</a></li>  </ul> </div> </div>  </nav> <div class="bs-header" id="content"> <div class="container"> <h1>Bootsnipp</h1> <p> Design elements, playground and code snippets for <a href="http://www.getbootstrap.com" target="_blank"> Bootstrap</a> HTML/CSS/JS framework </p> </div> </div> <div class="container" style="margin-top:20px;margin-bottom:20px;max-width:1200px;"> <div class="row"> <div class="col-md-4"> <p><strong>What is this?</strong></p> <p>Bootsnipp is an element gallery for web designers and web developers, anybody using <a href="http://www.getbootstrap.com" target="_blank">Bootstrap</a> will find this website essential in their craft.</p> </div> <div class="col-md-4"> <div id="ads-container">  <ins class="adsbygoogle" style="display:inline-block;width:320px;height:100px" data-ad-client="ca-pub-8815422507798180" data-ad-slot="9399242925"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="col-md-4"> <p><strong>Stay updated, Subscribe to Bootsnipp mailing list </strong></p> <p>(only important updates will be sent, your email is never shared or sold to anyone else)</p> <div id="mc_embed_signup"> <form action="//bootsnipp.us5.list-manage.com/subscribe/post?u=ab6dc620bc8c59e4783d7843d&id=dad3baa240" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div class="input-group"> <input type="email" value="" placeholder="E-mail address" name="EMAIL" class="required email form-control" id="mce-EMAIL"> <span class="input-group-btn"> <input type="submit" class="button btn btn-default" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"> </span> </div> </form> </div> </div> </div> </div> <div class="container" style="max-width:1200px"> <div class="row"> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/BxA1B"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-7219bb69e3593cd3330e66e461fd0a75d9b1d0f3.jpg" width="320" height="240" alt="Bootstrap 4 Blog Carousel">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/BxA1B" class="tip" data-toggle="tooltip" title="Favorited">85 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/BxA1B">Bootstrap 4 Blog Carousel</a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/9kBZp"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-0315e225df03511055ff0c187dcaa239a12cac25.jpg" width="320" height="240" alt="Multi Item Carousel">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/9kBZp" class="tip" data-toggle="tooltip" title="Favorited">79 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/9kBZp">Multi Item Carousel</a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/WMlMa"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-dc372ececf486d9b39399e9a92d4e40ae4f45127.jpg" width="320" height="240" alt="Carousel with Search">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/WMlMa" class="tip" data-toggle="tooltip" title="Favorited">101 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/WMlMa">Carousel with Search</a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/1d30y"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-3216347293001f1698b128393a3ab72dca689a55.jpg" width="320" height="240" alt="Login Class="Gabriel"">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/1d30y" class="tip" data-toggle="tooltip" title="Favorited">9 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/1d30y">Login Class="Gabriel"</a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/VvlPR"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-0f229e397dd66976cd51985485c1933bd8d86d54.jpg" width="320" height="240" alt="Bootstrap 4 navbar with centered logo">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/VvlPR" class="tip" data-toggle="tooltip" title="Favorited">23 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/VvlPR">Bootstrap 4 navbar with centered logo</a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/7nAMP"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-929de79738c428870e0ec0d4294c0d4d08e8929a.jpg" width="320" height="240" alt="bootstrap 4.1.1 landing carousel">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/7nAMP" class="tip" data-toggle="tooltip" title="Favorited">71 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/7nAMP">bootstrap 4.1.1 landing carousel</a> </p> </div> </div> </div> <div class="col-md-12"> <center>  <div id="ezoic-pub-ad-placeholder-161"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="auto"></ins> </div>  </center> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3" style="margin-top:10px"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap" style="overflow:hidden"> <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/light-bootstrap-dashboard?partner=114912"> <img class="danlazy" src="https://s3.amazonaws.com/creativetim_bucket/products/32/thumb/opt_lbd_thumbnail.jpg?1513017628" width="320" height="240" alt="Light Bootstrap Dashboard"> </a> </div> <div> <p class="pull-right view-counts"> <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/light-bootstrap-dashboard?partner=114912" class="tip" data-toggle="tooltip" title="Favorited"></a> <a href="/templates"><span class="label label-info tip" data-toggle="tooltip" title="" data-original-title="More Templates"> Free Template</span></a> </p> <p class="lead snipp-title" style="margin:10px"> <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/light-bootstrap-dashboard?partner=114912">Light Bootstrap Dashboard<br/></a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3" style="margin-top:10px"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap" style="overflow:hidden"> <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/vue-now-ui-kit-pro?partner=114912"> <img class="danlazy" src="https://s3.amazonaws.com/creativetim_bucket/products/91/thumb/opt_nukp_vue_thumbnail.jpg?1534959644" width="320" height="240" alt=" Vue Now UI Kit PRO "> </a> </div> <div> <p class="pull-right view-counts"> <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/vue-now-ui-kit-pro?partner=114912" class="tip" data-toggle="tooltip" title="Favorited"></a> <a href="/templates"><span class="label label-info tip" data-toggle="tooltip" title="" data-original-title="More Templates"> Template</span></a> </p> <p class="lead snipp-title" style="margin:10px"> <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/vue-now-ui-kit-pro?partner=114912"> Vue Now UI Kit PRO <br/></a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3" style="margin-top:10px"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap" style="overflow:hidden"> <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/material-dashboard-pro-angular2?partner=114912"> <img class="danlazy" src="https://s3.amazonaws.com/creativetim_bucket/products/55/thumb/opt_mdp_angular_thumbnail.jpg?1510145237" width="320" height="240" alt=" Material Dashboard Pro Angular "> </a> </div> <div> <p class="pull-right view-counts"> <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/material-dashboard-pro-angular2?partner=114912" class="tip" data-toggle="tooltip" title="Favorited"></a> <a href="/templates"><span class="label label-info tip" data-toggle="tooltip" title="" data-original-title="More Templates"> Template</span></a> </p> <p class="lead snipp-title" style="margin:10px"> <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/material-dashboard-pro-angular2?partner=114912"> Material Dashboard Pro Angular <br/></a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/aMVZE"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-e85357894e81d295f537d378f8bb69ffb7feafc0.jpg" width="320" height="240" alt="Information Cards">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/aMVZE" class="tip" data-toggle="tooltip" title="Favorited">54 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/aMVZE">Information Cards</a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/X2GEX"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-fd277765a27835e0e0fdb3f57ade4bea501f4022.jpg" width="320" height="240" alt="Simple white navbar">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/X2GEX" class="tip" data-toggle="tooltip" title="Favorited">15 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/X2GEX">Simple white navbar</a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/3522X"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-1195a1f4284a218bbdf06366081f7d5ed64ca252.jpg" width="320" height="240" alt="My Awesome Login Page">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/3522X" class="tip" data-toggle="tooltip" title="Favorited">126 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/3522X">My Awesome Login Page</a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/GaeQR"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/b4cc3c8230697c60962245e572d135c28b87687c.png" width="320" height="240" alt="Awesome Search Box">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/GaeQR" class="tip" data-toggle="tooltip" title="Favorited">169 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/GaeQR">Awesome Search Box</a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/xrXp9"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/ce02fd14cbf1e1194d3498ed0ea603195ea85260.png" width="320" height="240" alt="Product Shopping Grid Styles">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/xrXp9" class="tip" data-toggle="tooltip" title="Favorited">224 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/xrXp9">Product Shopping Grid Styles</a> </p> </div> </div> </div> <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> <div class="thumbnail bootsnipp-thumb" style="padding:0"> <div class="imgwrap"> <a href="https://bootsnipp.com/snippets/nNoMz"> <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/0b0e75d3ced144613843e0c811de78e6ea977534.png" width="320" height="240" alt="Our Team section using bootstrap 4">  </a> </div> <div> <p class="pull-right view-counts">  <a href="https://bootsnipp.com/snippets/nNoMz" class="tip" data-toggle="tooltip" title="Favorited">77 <i class="icon-thumbs-up"></i></a> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">4.1.1</span></a> </p> <p class="lead snipp-title" style="margin: 10px"> <a href="https://bootsnipp.com/snippets/nNoMz">Our Team section using bootstrap 4</a> </p> </div> </div> </div> </div> <div class="col-md-12"> </div> <div class="row"> <div class="row"> <div class="col-md-8 col-lg-9"> <center>  <div id="ezoic-pub-ad-placeholder-101"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>  </center> </div>  </div> </div> </div> <div class="text-center"><ul class="pagination pagination-large"> <li class="disabled"><span>«</span></li><li class="active"><span>1</span></li><li><a href="http://bootsnipp.com?page=2">2</a></li><li><a href="http://bootsnipp.com?page=3">3</a></li><li><a href="http://bootsnipp.com?page=4">4</a></li><li><a href="http://bootsnipp.com?page=5">5</a></li><li><a href="http://bootsnipp.com?page=6">6</a></li><li><a href="http://bootsnipp.com?page=7">7</a></li><li><a href="http://bootsnipp.com?page=8">8</a></li><li class="disabled"><span>...</span></li><li><a href="http://bootsnipp.com?page=70">70</a></li><li><a href="http://bootsnipp.com?page=71">71</a></li><li><a href="http://bootsnipp.com?page=2" rel="next">»</a></li> </ul> </div> </div> <div class="clearfix"></div> <footer class="bs-footer" role="contentinfo"> <div class="container"> <div class="bs-social"> <ul class="bs-social-buttons"> <li class="facebook-button"> <div id="fb-root"></div> <div id="js-facebook-share" class="fb-like" data-href="http://bootsnipp.com" data-width="130" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div> </li> <li class="follow-btn"> <a id="js-twitter-follow" href="https://twitter.com/bootsnipp" class="twitter-follow-button" data-show-count="false">Follow @bootsnipp</a> </li> <li class="tweet-btn"> <a id="js-twitter-tweet" href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootsnipp.com" data-text="RT Design elements and code snippets for #twbootstrap HTML/CSS/JS framework" data-via="bootsnipp" data-related="bootsnipp">Tweet</a> </li> </ul> </div> <p>Bootsnipp.com © 2017 <a href="http://www.danstools.com" target="_blank">Dan's Tools</a> | <a href="https://bootsnipp.com/privacy" target="_blank">Site Privacy policy</a> | <a href="/about">About</a> | <a href="mailto:bootsnipp@gmail.com">Advertise</a> | Featured snippets are <a href="https://bootsnipp.com/license">MIT license.</a> </p> </div> </footer> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="/dist/scripts.min.js"></script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="//www.danstools.com/js/forum.js"></script> <script type="text/javascript"> $(function(){ function setZoomer() { $('iframe.new-preview:not(.done)').each(function() { previewportWidth = $(this).parent().innerWidth()-15; factor = previewportWidth/1200; $(this).css({ 'height': '800px', 'width': '1200px', '-ms-zoom': factor, '-ms-transform': 'scale('+factor+')', 'transform': 'scale('+factor+')', '-moz-transform': 'scale('+factor+')', '-moz-transform-origin': '0 0', '-o-transform': 'scale('+factor+')', '-o-transform-origin': '0 0', '-webkit-transform': 'scale('+factor+')', '-webkit-transform-origin': '0 0' }); $(this).parent().css('height',$(this).parent().innerWidth()*.75); $(this).addClass('done'); }); $('iframe.snippet-preview:not(.done)').each(function() { previewportWidth = $(this).parent().parent().innerWidth()-30; $(this).zoomer({ width: previewportWidth, height: $(this).parent().innerWidth()*.75, zoom: .5, message : '' ,messageURL : $(this).attr('data-url') }) $(this).zoomer('refresh'); $(this).addClass('done'); }); if ($('.scrollpost > .thumbnail > .imgwrap > a > img').height() > 1) { $('.noimgrender').height($('.scrollpost > .thumbnail > .imgwrap > a > img').height()); $('.scrollpost > .thumbnail > .imgwrap').height($('.scrollpost > .thumbnail > .imgwrap > a > img').height()); } } setZoomer(); //$('ul.pagination').hide(); //$('.infinite-scroll').infiniteScroll({ // options // path: '.pagination li.active + li a', // append: '.scrollpost', // hideNav: (getUrlParameter('page') == false ? '.pagination' : false), // scrollThreshold: 800, //}); //$('.infinite-scroll').on( 'append.infiniteScroll', function( event, response, path ) { // $('.infinite-scroll').append("<div class=\"col-md-12\" style=\"margin-top:10px;margin-bottom:10px;max-height:250px\"><script async src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"><\/script><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-8815422507798180\" data-ad-slot=\"5700240528\" data-ad-format=\"auto\"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script></div>"); // $('img.lazy:not(.done)').lazyload({ effect : 'fadeIn' }); // $('img.lazy:not(.done)').addClass('done'); // setZoomer(); //}); }); var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.location.search.substring(1)), sURLVariables = sPageURL.split('&'), sParameterName, i; for (i = 0; i < sURLVariables.length; i++) { sParameterName = sURLVariables[i].split('='); if (sParameterName[0] === sParam) { return sParameterName[1] === undefined ? true : sParameterName[1]; } } }; </script> <div class="modal fade" id="DonateModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-top:100px"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">脳</span><span class="sr-only">Close</span></button> <h1 class="modal-title" id="lineModalLabel">Donate</h1> </div> <div class="modal-body text-center">  <br>BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT <br>ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76 <hr> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="FDGD82NBKQDHJ"> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> </div> </div> </div> </div> </div> </body> </html>

CINXE.COM

Home of free code snippets for Bootstrap