About Bootsnipp code snippets and playground 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>About Bootsnipp code snippets and playground 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="container"> <div class="row" style="margin-bottom:20px;"> <div class="col-sm-12"> <h1>About Bootsnipp</h1> <div class="row"> <div class="col-sm-4"> <h2>What is this place?</h2> <p>Bootsnipp is an element gallery for web designers and web developers, anybody who is using Bootstrap will find this website essential in their craft.</p> <p>Bootsnipp was created by Maks Surguy in September 2012, and is now operated by <a href="https://www.danstools">Dan's Tools</a> as a repository of useful HTML snippets for web developers using Bootstrap framework.</p> <p>It has been completely rebuilt a year later and released in October 2013 as a Bootstrap playground with more capabilities.</p> <p>Bootsnipp has been incredibly popular since its first day of existence, it has been on <a target="_blank" rel="nofollow" href="http://news.ycombinator.com/item?id=4520437">best of Hacker News</a> and Smashing Magazine <a target="_blank" rel="nofollow" href="https://www.facebook.com/smashmag">facebook page</a> and their <a target="_blank" rel="nofollow" href="https://twitter.com/smashingmag/status/250668741791215616">twitter feed.</a></p> <h2>FAQ:</h2> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#faq1"> Is using Bootsnipp free? </a> </h4> </div> <div id="faq1" class="panel-collapse collapse in"> <div class="panel-body"> You can register to use Bootsnipp for free. You will be able to create snippets, favorite other snippets and fork snippets for free. The snippets you create will be visible by others but in near future there will be accounts that will allow you to make your profile private. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#faq2"> How can I share my snippets? </a> </h4> </div> <div id="faq2" class="panel-collapse collapse"> <div class="panel-body"> You can share your snippets in multiple ways. You can use the sharing buttons to share snippets on Facebook or Twitter. Also you can send a link to your snippet over email, the URL to the snippet looks like this : http://bootsnipp.com/snippets/hash where "hash" is the unique id of your snippet. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#faq3"> Which versions of Bootstrap can I use on Bootsnipp? </a> </h4> </div> <div id="faq3" class="panel-collapse collapse"> <div class="panel-body"> <p>Bootsnipp supports the following versions of Bootstrap:</p> <br>4.1.1 <br>4.0.0 <br>3.3.0 <br>3.2.0 <br>3.1.0 <br>3.0.3 <br>3.0.1 <br>3.0.0 <br>2.3.2 <p>jQuery:</p> <br>3.2.1 <br>2.2.4 <br>1.11.1 </div> </div> </div> </div> </div> <div class="col-sm-4"> <h2>Thanks to :</h2> <p>Obviously, <a target="_blank" rel="nofollow" href="http://getbootstrap.com">Bootstrap</a> and the guys behind it, <a target="_blank" rel="nofollow" href="http://twitter.com/mdo">@mdo</a> and <a target="_blank" rel="nofollow" href="http://twitter.com/fat">@fat</a>!</p> <p>Amazing <a target="_blank" rel="nofollow" href="http://laravel.com">Laravel PHP Framework</a> that is such a joy to code with</p> <p>Creator of interactive Bootstrap <a target="_blank" rel="nofollow" href="http://bootsnipp.com/forms">form builder</a> for allowing me to use it here, <a target="_blank" rel="nofollow" href="https://github.com/minikomi/Bootstrap-Form-Builder">(his GitHub repo)</a></p> <p>Thomas Park, creator of <a href="https://github.com/thomaspark/glyphsearch">GlyphSearch</a>.</p> </div> <div class="col-sm-4"> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=112989545392380"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <h2>News and updates</h2> <p>Bootsnipp has over 200,000 users!</p> <p>Bootsnipp has been shortlisted (top 5) for a <a href="https://thenetawards.com/vote/side-project/bootsnipp/">Net Award</a> in Side Projects category! Thank you for your nomination.</p> <p class="text-center"><img src="https://bootsnipp.com/img/net-awards-shortlist.png"></p> <h2>Bootsnipp Community</h2> <div class="fb-like-box" data-href="https://www.facebook.com/pages/Bootsnipp/227323707426444" data-width="300" data-height="240" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div> </div> </div> </div> </div> </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> <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

About Bootsnipp code snippets and playground for Bootstrap