1<!doctype html> 2<html xmlns="http://www.w3.org/1999/xhtml" 3 xmlns:og="http://ogp.me/ns#" 4 xmlns:fb="https://www.facebook.com/2008/fbml"> 5 <head> 6 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta charset="utf-8"> 9 <meta name="msvalidate.01" content="36A28D9109C077BA3E623651FC1656F4" /> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 11 <meta property="fb:admins" content="19908503" /> 12 <meta property="fb:app_id" content="112989545392380" /> 13 <meta property="og:title" content="HTML Snippets for Twitter Boostrap framework : Bootsnipp.com" /> 14 <meta property="og:type" content="website" /> 15 <meta property="twitter:account_id" content="786331568" /> 16 <meta itemprop="name" content="Bootsnipp"> 17 <meta itemprop="description" content="Free HTML snippets for Semantic UI HTML CSS JS"> 18 <meta property="og:url" content="https://bootsnipp.com" /> 19 <meta property="og:image" content="https://bootsnipp.com/img/logo.jpg" /> 20 <meta property="og:site_name" content="Bootsnipp.com" /> 21 22 <meta property="og:description" content="A design element gallery for web designers and web developers. Find snippets using HTML, CSS, Javascript, jQuery, and Semantic UI." /> 23 <meta name="description" content="A design element gallery for web designers and web developers. Find snippets using HTML, CSS, Javascript, jQuery, and Semantic UI"> 24 <title>Home of free code snippets for Semantic UI</title> 25 26
26<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
26 27 <link rel="shortcut icon" href="//d2d3qesrx8xj6s.cloudfront.net/favicon.ico" type="image/x-icon"> 28 <link rel="icon" href="//d2d3qesrx8xj6s.cloudfront.net/favicon.ico" type="image/x-icon"> 29 <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-precomposed.png"> 30 <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-72x72-precomposed.png"> 31 <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-114x114-precomposed.png"> 32 <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-144x144-precomposed.png"> 33 <link rel="alternate" type="application/rss+xml" title="Latest snippets from Bootsnipp.com" href="https://bootsnipp.com/feed.rss" /> 34 35 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 36 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"> 37<!-- <link rel="stylesheet" href="//d2d3qesrx8xj6s.cloudfront.net/dist/bootsnipp.min.css?ver=872ccd9c6dce18ce6ea4d5106540f089">--> 38 <link rel="stylesheet" href="/dist/bootsnipp.min.css"> 39 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 40 <!--[if lt IE 9]> 41
41<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
41 42
42<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"></script>
42 43 <![endif]-->
44<script>
vendor: 339 bytes, lines 44-50
44 45 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 46 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 47 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 48 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 49 50 ga('create', '
50UA-55581850-1
vendor: 37 bytes, lines 50-51
50', 'auto', {'allowLinker': true}); 51
51ga('require', 'linker'); 52 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'] ); 53 ga('send', 'pageview'); 54 55 window.onload = function() { 56/* $('body').append('
56<script type="text/javascript" src="https://srv.buysellads.com/ads/CVADLKQJ.json?callback=drop_ad" async><\/script>'); 57 $('body').append("<style>.bsa-apiads {\ 58 line-height: 1.5;\ 59 display: inline-block;\ 60 float: left;\ 61 font-size: 12px;\ 62 background-color: #5A8DB6;\ 63 border: solid 1px #337799;\ 64 box-shadow: inset 0 1px hsla(0, 0%, 100%, .1);\ 65 box-sizing: border-box;\ 66 background-image: url('http://www.danstools.com/devops/img/devoops_pattern_b10.png');\ 67 margin: 1em 1em 0 2em;\ 68 border-radius: 4px;\ 69 text-align: center;\ 70 padding: .25em;\ 71}\ 72 \ 73.bsa-apiads a:before {\ 74 margin-right: 4px;\ 75 padding: 2px 6px;\ 76 border-radius: 3px;\ 77 background-color: #58B668;\ 78 color: #fff;\ 79 content: 'Ad';\ 80}\ 81 \ 82 .bsa-apiads a {\ 83 color: #fff;\ 84 }\ 85 \ 86 .bsa-apiads a:hover {\ 87 color: inherit;\ 88 }</style>");*/ 89 setTimeout(function() { 90 var ad = document.querySelector(".bsap_ac1f95c148ce6148393fd34e69a52240"); 91 var promos = document.querySelectorAll(".dn99ip"); 92 var isblock = 0; 93 for (var i = 0; i < promos.length; i++) { 94 var promo = promos[i]; 95 if (isblock ==1 || (ad && ad.innerHTML.replace(/\s/g, "").length == 0)) { 96 isblock = 1; 97// ad.style.cssText = 'display:block !important'; 98// promo.style.cssText = 'display:none !important'; 99 promo.innerHTML = ''; 100 promo.style.display= 'inline-block'; 101 promo.style.visibility= 'visible'; 102 promo.style.maxWidth= ''; 103 } else if (promo) { 104 promo.innerHTML = ''; 105// var promotwo = document.querySelector("#toppromo2"); 106 promo.childNodes[0].childNodes[0].style.width= ''; 107 } 108 } 109 }, 1000); 110 }; 111 112</script>
112 113
113<script type="text/javascript"> 114 var fb_param = {}; 115 fb_param.pixel_id = '6007046190250'; 116 fb_param.value = '0.00'; 117 (function(){ 118 var fpw = document.createElement('script'); 119 fpw.async = true; 120 fpw.src = '//connect.facebook.net/en_US/fp.js'; 121 var ref = document.getElementsByTagName('script')[0]; 122 ref.parentNode.insertBefore(fpw, ref); 123 })(); 124 </script>
124 125 <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=6007046190250&value=0" /></noscript> 126 </head> 127 <body> 128<!-- BuySellAds Ad Code -->
129<script type="text/javascript"> 130(function(){ 131 var bsa = document.createElement('script'); 132 bsa.type = 'text/javascript'; 133 bsa.async = true; 134 bsa.src = '//s3.buysellads.com/ac/bsa.js'; 135 (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); 136})(); 137</script>
137 138<!-- End BuySellAds Ad Code --> 139 140 <nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation" style="z-index: 9999999"> 141 <div class="container"> 142 <!-- Brand and toggle get grouped for better mobile display --> 143 <div class="navbar-header"> 144 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> 145 <span class="sr-only">Toggle navigation</span> 146 <span class="icon-bar"></span> 147 <span class="icon-bar"></span> 148 <span class="icon-bar"></span> 149 </button> 150 <div class="animbrand"> 151 <a class="navbar-brand animate" href="https://bootsnipp.com">Bootsnipp</a> 152 </div> 153 </div> 154<!--
154<script src="/js/BSAcpc.js" async></script>
154 155<div class="bsa-apiads hidden-sm hidden-xs"></div> 156--> 157 <!-- Collect the nav links, forms, and other content for toggling --> 158 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> 159 <ul class="nav navbar-nav navbar-left"> 160 <li> 161 <a href="#" class="dropdown-toggle " data-toggle="dropdown">Semantic UI <span class="caret"></span> 162 <span style="font-size:.5em; position:absolute; top:3px; left:2px">For</span> 163 </a> 164 <ul class="dropdown-menu" role="menu"> 165 <li class="dropdown-header">CSS Frameworks</li> 166 <li class=""><a href="/" class="">Bootstrap</a></li> 167 <li class=""><a href="/foundation" class="">Foundation</a></li> 168 <li class="active"><a href="/semanticui" class="">Semantic UI</a></li> 169 <li class=""><a href="/materialize" class="">Materialize</a></li> 170 <li class=""><a href="/purecss" class="">Pure</a></li> 171 <li class=""><a href="/bulma" class="">Bulma</a></li> 172 <li class="dropdown-header">References</li> 173 <li class=""><a href="/cssref" class="">CSS Reference</a></li> 174<!-- <li class=""><a href="/bootstrapref" class="">Bootstrap Reference</a></li>--> 175 </ul> 176 </li> 177 </ul> 178 <ul class="nav navbar-nav navbar-right"> 179 <li class=""> 180 <form action="https://bootsnipp.com/semanticui/search" method="GET" role="search"> 181 <input style="width:100%;margin-top:10px;" type="text" class="input-sm form-control" name="q" placeholder="Search for snippets"> 182 </form> 183 </li> 184<!-- <li class=""><a href="https://bootsnipp.com/about" class="animate">About</a></li>--> 185<!-- <li><a href="https://bootsnipp.com/semanticui/user/snippets/new" class="">+New</a></li>--> 186 187<!-- <li> 188 <a href="#" class="" data-toggle="dropdown">Templates <span class="caret"></span></a> 189 <ul class="dropdown-menu" role="menu"> 190 <li class=""><a target="_new" href="https://colorlib.com/wp/templates/" class="">Free Templates <span class="pull-right glyphicon glyphicon-edit"></span></a></li> 191 </ul> 192 </li>--> 193 <li> 194 <a href="#" class="dropdown-toggle " data-toggle="dropdown">Tools <span class="caret"></span></a> 195 <ul class="dropdown-menu" role="menu"> 196<!-- <li class=""><a href="https://bootsnipp.com/blog" class="animate">Blog <span class="pull-right glyphicon glyphicon-pencil"></span></a></li> 197 <li class=""><a href="https://bootsnipp.com/resources" class="animate">List of resources <span class="pull-right glyphicon glyphicon-align-justify"></span></a></li> 198 <li><a href="http://getbootstrap.com" target="_blank" class="animate">Download Bootstrap <span class="pull-right glyphicon glyphicon-cloud-download"></span></a></li> 199 <li class="dropdown-header">Bootstrap Templates</li> 200 <li class=""><a href="https://bootsnipp.com/templates" class="animate">Browse Templates <span class="pull-right glyphicon glyphicon-shopping-cart"></span></a></li> 201 <li class="dropdown-header">Builders</li> 202--> 203 <li class=""><a href="https://bootsnipp.com/semanticui/forum/bootstrap" class="">Community</a></li> 204 <li class=""><a href="https://bootsnipp.com/builder" class="">Page Builder <span class="pull-right glyphicon glyphicon-modal-window"></span></a></li> 205 <li class=""><a href="https://bootsnipp.com/forms" class="">Form Builder <span class="pull-right glyphicon glyphicon-tasks"></span></a></li> 206 <li class=""><a href="https://bootsnipp.com/buttons" class="">Button Builder <span class="pull-right glyphicon glyphicon-edit"></span></a></li> 207 <li class=""><a href="https://bootsnipp.com/iconsearch" class="">Icon Search <span class="pull-right glyphicon glyphicon-search"></span></a></li> 208 <li class="dropdown-header">Dan's Tools</li> 209 <li class=""><a href="http://www.cleancss.com/diff-compare-merge/" class="">Diff / Merge <span class="pull-right glyphicon glyphicon-transfer"></span></a></li> 210 <li class=""><a href="http://www.hexcolortool.com/" class="">Color Picker <span class="pull-right glyphicon glyphicon-pencil"></span></a></li> 211 <li class=""><a href="http://www.danstools.com/keyword-tool/" class="">Keyword Tool <span class="pull-right glyphicon glyphicon-list-alt"></span></a></li> 212 <li class=""><a href="http://www.cssfontstack.com/Web-Fonts" class="">Web Fonts <span class="pull-right glyphicon glyphicon-font"></span></a></li> 213 <li class=""><a href="http://www.htaccessredirect.net/" class="">.htaccess Generator <span class="pull-right glyphicon glyphicon-console"></span></a></li> 214 <li class=""><a href="http://www.favicon-generator.org/" class="">Favicon Generator <span class="pull-right glyphicon glyphicon-picture"></span></a></li> 215 <li class=""><a href="http://www.website-performance.org/" class="">Site Speed Test <span class="pull-right glyphicon glyphicon-dashboard"></span></a></li> 216 217 </ul> 218 </li> 219 <li class="dropdown"> 220 <a href="https://bootsnipp.com/snippets" class="dropdown-toggle " data-toggle="dropdown">Snippets <span class="caret"></span></a> 221 <ul class="dropdown-menu" role="menu"> 222 <li class=""><a href="https://bootsnipp.com/semanticui" class="">Featured <span class="pull-right glyphicon glyphicon-star"></span></a></li> 223 <li class=""><a href="https://bootsnipp.com/semanticui/tags" class="">Tags <span class="pull-right glyphicon glyphicon-tags"></span></a></li> 224 <li class="dropdown-header">By Bootstrap Version</li> 225 <li><a href="https://bootsnipp.com/semanticui/tags/2.2.10" class="">2.2.10</a></li> 226 </ul> 227 </li> 228 229 <li class=""><a href="https://bootsnipp.com/register" class="">Register</a></li> 230 <li id="nav-login-btn" class=""><a href="https://bootsnipp.com/login" class="">Login</a></li> 231 232<!-- <li class="hidden-xs"><a href="#toggle-search" class=""><span class="glyphicon glyphicon-search"></span></a></li>--> 233 </ul> 234 </div> 235 </div> 236<!-- <div class="bootsnipp-search "> 237 <div class="container"> 238 <form action="https://bootsnipp.com/semanticui/search" method="GET" role="search"> 239 <div class="input-group"> 240 <input type="text" class="form-control" name="q" placeholder="Search for snippets and hit enter">
241 <span class="input-group-btn"> 242 <button class="btn btn-danger" type="reset"><span class="glyphicon glyphicon-remove"></span></button> 243 </span> 244 </div> 245 </form> 246 </div> 247 </div> 248--> 249</nav> 250 251 252<div class="bs-header" id="content"> 253 <div class="container"> 254 <h1>Bootsnipp</h1> 255 <p> Design elements, playground and code snippets for <a href="https://semantic-ui.com" target="_blank"> Semantic UI</a> HTML/CSS/JS framework </p> 256 </div> 257</div> 258 259<div class="container" style="margin-top:20px;margin-bottom:20px;max-width:1200px;"> 260 <div class="row"> 261<div class="col-md-6"> 262<p><strong>Help us out!</strong></p> 263<p>We are expanding our offering beyond just Bootstrap. If you have any awesome Semantic UI CSS snippets, please share them!</p> 264</div> 265<div class="col-md-6"> 266<a href="https://bootsnipp.com/semanticui/user/snippets/new" class="btn btn-primary btn-lg">Add Your Snippet</a> 267</div> 268</div> 269</div> 270<div class="container" style="max-width:1200px"> 271 <div class="row"> 272 <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> 273 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 274 <div class="imgwrap"> 275 <a href="https://bootsnipp.com/semanticui/snippets/z8AeX"> 276 <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/dd4715faefc100e45ef463258c40ee8980c1a5d5.jpg" width="320" height="240" alt="UI Cards with Labels and Tags"> 277<!-- <img src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/dd4715faefc100e45ef463258c40ee8980c1a5d5.jpg" width="320" height="240" alt="UI Cards with Labels and Tags">--> 278 </a> 279 </div> 280 281 <div> 282 <p class="pull-right view-counts"> 283<!-- <a href="https://bootsnipp.com/semanticui/snippets/z8AeX" class="tip" data-toggle="tooltip" title="Viewed">29.1K <i class="icon-eye-open"></i></a> 284--> 285 <a href="https://bootsnipp.com/semanticui/snippets/z8AeX" class="tip" data-toggle="tooltip" title="Favorited">11 <i class="icon-thumbs-up"></i></a> 286 <a href="https://bootsnipp.com/tags/2.2.10"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">2.2.10</span></a> 287 </p> 288 <p class="lead snipp-title" style="margin: 10px"> 289 <a href="https://bootsnipp.com/semanticui/snippets/z8AeX">UI Cards with Labels and Tags</a> 290 </p> 291 </div> 292 </div> 293</div> 294 295 296 <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> 297 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 298 <div class="imgwrap"> 299 <a href="https://bootsnipp.com/semanticui/snippets/4MGNQ"> 300 <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/61a42f1a56531de97000ff403abe661d7b9f574b.jpg" width="320" height="240" alt="Text and Image Alternating Left and Right Side"> 301<!-- <img src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/61a42f1a56531de97000ff403abe661d7b9f574b.jpg" width="320" height="240" alt="Text and Image Alternating Left and Right Side">--> 302 </a> 303 </div> 304 305 <div> 306 <p class="pull-right view-counts"> 307<!-- <a href="https://bootsnipp.com/semanticui/snippets/4MGNQ" class="tip" data-toggle="tooltip" title="Viewed">23.4K <i class="icon-eye-open"></i></a> 308--> 309 <a href="https://bootsnipp.com/semanticui/snippets/4MGNQ" class="tip" data-toggle="tooltip" title="Favorited">4 <i class="icon-thumbs-up"></i></a> 310 <a href="https://bootsnipp.com/tags/2.2.10"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">2.2.10</span></a> 311 </p> 312 <p class="lead snipp-title" style="margin: 10px"> 313 <a href="https://bootsnipp.com/semanticui/snippets/4MGNQ">Text and Image Alternating Left and Right Side</a> 314 </p> 315 </div> 316 </div> 317</div> 318 319 320 <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> 321 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 322 <div class="imgwrap"> 323 <a href="https://bootsnipp.com/semanticui/snippets/Gab0g"> 324 <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/3d7151e1f31faded043ae33f908400dd439ab52a.jpg" width="320" height="240" alt="Contact Form with Full Backgroun
324d Image"> 325<!-- <img src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/3d7151e1f31faded043ae33f908400dd439ab52a.jpg" width="320" height="240" alt="Contact Form with Full Background Image">--> 326 </a> 327 </div> 328 329 <div> 330 <p class="pull-right view-counts"> 331<!-- <a href="https://bootsnipp.com/semanticui/snippets/Gab0g" class="tip" data-toggle="tooltip" title="Viewed">30.0K <i class="icon-eye-open"></i></a> 332--> 333 <a href="https://bootsnipp.com/semanticui/snippets/Gab0g" class="tip" data-toggle="tooltip" title="Favorited">2 <i class="icon-thumbs-up"></i></a> 334 <a href="https://bootsnipp.com/tags/2.2.10"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">2.2.10</span></a> 335 </p> 336 <p class="lead snipp-title" style="margin: 10px"> 337 <a href="https://bootsnipp.com/semanticui/snippets/Gab0g">Contact Form with Full Background Image</a> 338 </p> 339 </div> 340 </div> 341</div> 342 343 344 <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> 345 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 346 <div class="imgwrap"> 347 <a href="https://bootsnipp.com/semanticui/snippets/X2nrG"> 348 <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/18cd9ddfa765def88895a9cd6b98110a137916c4.jpg" width="320" height="240" alt="Product Catalog - Semantic UI Cards"> 349<!-- <img src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/18cd9ddfa765def88895a9cd6b98110a137916c4.jpg" width="320" height="240" alt="Product Catalog - Semantic UI Cards">--> 350 </a> 351 </div> 352 353 <div> 354 <p class="pull-right view-counts"> 355<!-- <a href="https://bootsnipp.com/semanticui/snippets/X2nrG" class="tip" data-toggle="tooltip" title="Viewed">22.5K <i class="icon-eye-open"></i></a> 356--> 357 <a href="https://bootsnipp.com/semanticui/snippets/X2nrG" class="tip" data-toggle="tooltip" title="Favorited">2 <i class="icon-thumbs-up"></i></a> 358 <a href="https://bootsnipp.com/tags/2.2.10"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">2.2.10</span></a> 359 </p> 360 <p class="lead snipp-title" style="margin: 10px"> 361 <a href="https://bootsnipp.com/semanticui/snippets/X2nrG">Product Catalog - Semantic UI Cards</a> 362 </p> 363 </div> 364 </div> 365</div> 366 367 368 <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> 369 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 370 <div class="imgwrap"> 371 <a href="https://bootsnipp.com/semanticui/snippets/GQZPR"> 372 <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/139d2221e14df2ed18dc60aaefc113f9f011361c.jpg" width="320" height="240" alt="Panel Grid Cards"> 373<!-- <img src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/139d2221e14df2ed18dc60aaefc113f9f011361c.jpg" width="320" height="240" alt="Panel Grid Cards">--> 374 </a> 375 </div> 376 377 <div> 378 <p class="pull-right view-counts"> 379<!-- <a href="https://bootsnipp.com/semanticui/snippets/GQZPR" class="tip" data-toggle="tooltip" title="Viewed">27.7K <i class="icon-eye-open"></i></a> 380--> 381 <a href="https://bootsnipp.com/semanticui/snippets/GQZPR" class="tip" data-toggle="tooltip" title="Favorited">3 <i class="icon-thumbs-up"></i></a> 382 <a href="https://bootsnipp.com/tags/2.2.10"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">2.2.10</span></a> 383 </p> 384 <p class="lead snipp-title" style="margin: 10px"> 385 <a href="https://bootsnipp.com/semanticui/snippets/GQZPR">Panel Grid Cards</a> 386 </p> 387 </div> 388 </div> 389</div> 390 391 392 <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> 393 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 394 <div class="imgwrap"> 395 <a href="https://bootsnipp.com/semanticui/snippets/2o9g1"> 396 <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/d368115cd076b188f58e82ed66a0b4cd6ef16b98.jpg" width="320" height="240" alt="Semantic Ui Cards"> 397<!-- <img src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/d368115cd076b188f58e82ed66a0b4cd6ef16b98.jpg" width="320" height="240" alt="Semantic Ui Cards">--> 398 </a> 399 </div> 400 401 <div> 402 <p class="pull-right view-counts"> 403<!-- <a href="https://bootsnipp.com/semanticui/snippets/2o9g1" class="tip" data-toggle="tooltip" title="Viewed">32.9K <i class="icon-eye-open"></i></a> 404--> 405 <a href="https://bootsnipp.com/semanticui/snippets/2o9g1" class="tip" data-toggle="tooltip" title="Favorited">11 <i class="icon-thumbs-up"></i></a> 406 <a href="https://bootsnipp.com/tags/2.2.10"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">2.2.10</span></a> 407 </p> 408 <p class="lead snipp-title" style="margin: 10px"> 409 <a href="https://bootsnipp.com/semanticui/snippets/2o9g1">Semantic Ui Cards</a> 410 </p>
411 </div> 412 </div> 413</div> 414 415 416 <div class="col-md-12"> 417 <center> 418<!-- Ezoic - middle_list_view - mid_content --> 419<div id="ezoic-pub-ad-placeholder-161"> 420 <ins class="adsbygoogle" 421 style="display:block" 422 data-ad-client="ca-pub-8815422507798180" 423 data-ad-slot="5700240528" 424 data-ad-format="auto"></ins> 425 426</div> 427<!-- End Ezoic - middle_list_view - mid_content --> 428</center> 429 </div> 430 431<div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3" style="margin-top:10px"> 432 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 433 <div class="imgwrap" style="overflow:hidden"> 434 <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/paper-bootstrap-wizard?partner=114912"> 435 <img class="danlazy" src="https://s3.amazonaws.com/creativetim_bucket/products/49/thumb/opt_pbw_thumbnail.jpg?1473943046" width="320" height="240" alt="Paper Bootstrap Wizard"> 436 </a> 437 </div> 438 <div> 439 <p class="pull-right view-counts"> 440 <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/paper-bootstrap-wizard?partner=114912" class="tip" data-toggle="tooltip" title="Favorited"></a> 441<a href="/templates"><span class="label label-info tip" data-toggle="tooltip" title="" data-original-title="More Templates"> 442Free 443Template</span></a> 444 </p> 445 <p class="lead snipp-title" style="margin:10px"> 446 <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/paper-bootstrap-wizard?partner=114912">Paper Bootstrap Wizard<br/></a> 447 </p> 448 </div> 449 </div> 450</div> 451<div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3" style="margin-top:10px"> 452 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 453 <div class="imgwrap" style="overflow:hidden"> 454 <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/black-dashboard-react?partner=114912"> 455 <img class="danlazy" src="https://s3.amazonaws.com/creativetim_bucket/products/136/thumb/opt_bd_react.jpg?1543482024" width="320" height="240" alt="Black Dashboard React"> 456 </a> 457 </div> 458 <div> 459 <p class="pull-right view-counts"> 460 <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/black-dashboard-react?partner=114912" class="tip" data-toggle="tooltip" title="Favorited"></a> 461<a href="/templates"><span class="label label-info tip" data-toggle="tooltip" title="" data-original-title="More Templates"> 462Free 463Template</span></a> 464 </p> 465 <p class="lead snipp-title" style="margin:10px"> 466 <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/black-dashboard-react?partner=114912">Black Dashboard React<br/></a> 467 </p> 468 </div> 469 </div> 470</div> 471<div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3" style="margin-top:10px"> 472 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 473 <div class="imgwrap" style="overflow:hidden"> 474 <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/now-ui-kit?partner=114912"> 475 <img class="danlazy" src="https://s3.amazonaws.com/creativetim_bucket/products/56/thumb/opt_nuk_thumbnail.jpg?1494946669" width="320" height="240" alt="Now UI Kit"> 476 </a> 477 </div> 478 <div> 479 <p class="pull-right view-counts"> 480 <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/now-ui-kit?partner=114912" class="tip" data-toggle="tooltip" title="Favorited"></a> 481<a href="/templates"><span class="label label-info tip" data-toggle="tooltip" title="" data-original-title="More Templates"> 482Free 483Template</span></a> 484 </p> 485 <p class="lead snipp-title" style="margin:10px"> 486 <a rel="nofollow" target="_new" href="https://www.creative-tim.com/product/now-ui-kit?partner=114912">Now UI Kit<br/></a> 487 </p> 488 </div> 489 </div> 490</div> 491 492 493 494 <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> 495 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 496 <div class="imgwrap"> 497 <a href="https://bootsnipp.com/semanticui/snippets/gvMKo"> 498 <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/7c078e600d9d250f9d19c195eb6e7e59db14e560.jpg" width="320" height="240" alt="Jumbotron (like Bootstrap)"> 499<!-- <img src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/7c078e600d9d250f9d19c195eb6e7e59db14e560.jpg" width="320" height="240" alt="Jumbotron (like Bootstrap)">--> 500 </a> 501 </div> 502 503 <div> 504 <p class="pull-right view-counts"> 505<!-- <a href="https://bootsnipp.com/semanticui/snippets/gvMKo" class="tip" data-toggle="tooltip" title="Viewed">23.8K <i class="icon-eye-open"></i></a> 506--> 507 <a href="https://bootsnipp.com/semanticui/snippets/gvMKo" class="tip" data-toggle="tooltip" title="Favorited">1 <i class="icon-thumbs-up"></i></a> 508 <a href="https://bootsnipp.com/tags/2.2.10"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">2.2.10</span></a> 509 </p> 510 <p class="lead snipp-title" style="margin: 10px"> 511 <a href="https://bootsnipp.com/semanticui/snippets/gvMKo">Jumbotron (like Bootstrap)</a> 512 </p>
513 </div> 514 </div> 515</div> 516 517 518 <div class="scrollpost col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-3"> 519 <div class="thumbnail bootsnipp-thumb" style="padding:0"> 520 <div class="imgwrap"> 521 <a href="https://bootsnipp.com/semanticui/snippets/3MmWo"> 522 <img class="danlazy" src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/b292a376d13b9356ae964987a6f4e4d7e6aafdda.jpg" width="320" height="240" alt="Panels (like Bootstrap)"> 523<!-- <img src="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/b292a376d13b9356ae964987a6f4e4d7e6aafdda.jpg" width="320" height="240" alt="Panels (like Bootstrap)">--> 524 </a> 525 </div> 526 527 <div> 528 <p class="pull-right view-counts"> 529<!-- <a href="https://bootsnipp.com/semanticui/snippets/3MmWo" class="tip" data-toggle="tooltip" title="Viewed">23.0K <i class="icon-eye-open"></i></a> 530--> 531 <a href="https://bootsnipp.com/semanticui/snippets/3MmWo" class="tip" data-toggle="tooltip" title="Favorited">1 <i class="icon-thumbs-up"></i></a> 532 <a href="https://bootsnipp.com/tags/2.2.10"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">2.2.10</span></a> 533 </p> 534 <p class="lead snipp-title" style="margin: 10px"> 535 <a href="https://bootsnipp.com/semanticui/snippets/3MmWo">Panels (like Bootstrap)</a> 536 </p> 537 </div> 538 </div> 539</div> 540 541 542 </div> 543<div class="col-md-12"> 544</div> 545 <div class="row"> 546<div class="row"> 547 <div class="col-md-8 col-lg-9"> 548<center> 549<!-- Ezoic - top_of_page 101 - top_of_page --> 550<div id="ezoic-pub-ad-placeholder-101">
551<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
551 552<ins class="adsbygoogle" 553 style="display:block" 554 data-ad-client="ca-pub-8815422507798180" 555 data-ad-slot="5700240528" 556 data-ad-format="auto"></ins>
557<script> 558(adsbygoogle = window.adsbygoogle || []).push({}); 559</script>
559 560</div> 561<!-- End Ezoic - top_of_page 101 - top_of_page --> 562</center> 563 </div> 564 <!-- 565 <div class="col-md-4 col-lg-3"> 566<div class="thumbnail" style="padding-left:15px;"> 567<h4 style="margin-bottom:1px"><strong><a href="https://www.jotform.com/?utm_source=bootsnipp.com&utm_campaign=bootsnipp" rel="nofollow">Free Online Form Builder</a></strong></h4> 568<p>Create online forms for free.<br> 569Try <a href="https://www.jotform.com/?utm_source=bootsnipp.com&utm_campaign=bootsnipp" rel="nofollow">JotForm Form Builder</a></p> 570 571</div> 572--> 573 </div> 574 575</div> 576 577 </div> 578 579<div class="text-center"></div> 580</div> 581 582<div class="clearfix"></div> 583 <footer class="bs-footer" role="contentinfo"> 584 <div class="container"> 585 <div class="bs-social"> 586 <ul class="bs-social-buttons"> 587 <li class="facebook-button"> 588 <div id="fb-root"></div> 589 <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> 590 </li> 591 <li class="follow-btn"> 592 <a id="js-twitter-follow" href="https://twitter.com/bootsnipp" class="twitter-follow-button" data-show-count="false">Follow @bootsnipp</a> 593 </li> 594 <li class="tweet-btn"> 595 <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> 596 </li> 597 </ul> 598 </div> 599 <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:[email protected]">Advertise</a> | Featured snippets are <a href="https://bootsnipp.com/license">MIT license.</a> </p> 600 </div> 601 602</footer> 603 604
604<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
604 605
605<script src="/dist/scripts.min.js"></script>
605 606
606<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
606 607
607<script src="//www.danstools.com/js/forum.js"></script>
607 608
608<script type="text/javascript"> 609$(function(){ 610 611 function setZoomer() { 612 $('iframe.new-preview:not(.done)').each(function() 613 { 614 previewportWidth = $(this).parent().innerWidth()-15; 615 factor = previewportWidth/1200; 616 $(this).css({ 617 'height': '800px', 618 'width': '1200px', 619 '-ms-zoom': factor, 620 '-ms-transform': 'scale('+factor+')', 621 'transform': 'scale('+factor+')', 622 '-moz-transform': 'scale('+factor+')', 623 '-moz-transform-origin': '0 0', 624 '-o-transform': 'scale('+factor+')', 625 '-o-transform-origin': '0 0', 626 '-webkit-transform': 'scale('+factor+')', 627 '-webkit-transform-origin': '0 0' 628 }); 629 $(this).parent().css('height',$(this).parent().innerWidth()*.75); 630 $(this).addClass('done'); 631 }); 632 $('iframe.snippet-preview:not(.done)').each(function() 633 { 634 previewportWidth = $(this).parent().parent().innerWidth()-30; 635 $(this).zoomer({ width: previewportWidth, height: $(this).parent().innerWidth()*.75, zoom: .5, message : '' ,messageURL : $(this).attr('data-url') }) 636 $(this).zoomer('refresh'); 637 $(this).addClass('done'); 638 }); 639 if ($('.scrollpost > .thumbnail > .imgwrap > a > img').height() > 1) { 640 $('.noimgrender').height($('.scrollpost > .thumbnail > .imgwrap > a > img').height()); 641 $('.scrollpost > .thumbnail > .imgwrap').height($('.scrollpost > .thumbnail > .imgwrap > a > img').height()); 642 } 643 } 644 645 setZoomer(); 646 647 //$('ul.pagination').hide(); 648//$('.infinite-scroll').infiniteScroll({ 649 // options 650// path: '.pagination li.active + li a', 651// append: '.scrollpost', 652// hideNav: (getUrlParameter('page') == false ? '.pagination' : false), 653// scrollThreshold: 800, 654//}); 655 656//$('.infinite-scroll').on( 'append.infiniteScroll', function( event, response, path ) { 657// $('.infinite-scroll').append("<div class=\"col-md-12\" style=\"margin-top:10px;margin-bottom:10px;max-height:250px\">
657<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>
657<script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script></div>"); 658// $('img.lazy:not(.done)').lazyload({ effect : 'fadeIn' }); 659// $('img.lazy:not(.done)').addClass('done'); 660// setZoomer(); 661//}); 662}); 663var getUrlParameter = function getUrlParameter(sParam) { 664 var sPageURL = decodeURIComponent(window.location.search.substring(1)), 665 sURLVariables = sPageURL.split('&'), 666 sParameterName, 667 i; 668 669 for (i = 0; i < sURLVariables.length; i++) { 670 sParameterName = sURLVariables[i].split('='); 671 672 if (sParameterName[0] === sParam) { 673 return sParameterName[1] === undefined ? true : sParameterName[1]; 674 } 675 } 676}; 677</script>
677 678 679<div class="modal fade" id="DonateModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> 680 <div class="modal-dialog" style="margin-top:100px"> 681 <div class="modal-content"> 682 <div class="modal-header"> 683 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">Ã</span><span class="sr-only">Close</span></button> 684 <h1 class="modal-title" id="lineModalLabel">Donate</h1> 685 </div> 686 <div class="modal-body text-center"> 687<!-- <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAC4CAYAAAChOH1KAAAABHNCSVQICAgIfAhkiAAABDVJREFUeJzt3dFuEzEUQEGC+P9fDu8oq9bFjr0nM48IhdAeWdor2/t4Pp/PXxD0e/cXgFXETZa4yRI3WeIm68+rP3w8Hu/+Hj9yNeiZ9f1HP3/14Gn0/zXr+9y1Bys3WeImS9xkiZsscZP1clpyZdc2lNOe1u8yFVk9XTm9Bys3WeImS9xkiZsscZM1NC25snovxyyjU4XRPSSz/v6oXXtOrpzSg5WbLHGTJW6yxE2WuMmaMi25i9XTjLucDNp1kujdrNxkiZsscZMlbrLETVZyWjLrqX/0c1ZPVz5lyjGLlZsscZMlbrLETZa4yZoyLTntaX3WVGH1fSl3+Z6jTunByk2WuMkSN1niJkvcZA1NS057Kp9l1/0kq0/KnHZfyrtZuckSN1niJkvcZImbrJfTklP2BvzU3e/rmDXlWD11OZ2VmyxxkyVussRNlrjJejxfPAqvfsfKKe9M+cqud9zM+n/t+j2u/vlc+ffftXKTJW6yxE2WuMkSN1lLb3m9yxt4r9xlj8pp061T3iVk5SZL3GSJmyxxkyVusm7xTpxd04nVU4JRq+8tufr7q/ecXPnfKYqVmyxxkyVussRNlrjJGpqWrD4hcve9Gafd/rrrnTunfH8rN1niJkvcZImbLHGTNeWW19UnaHbdB7LrfpJd75pZ/Xt89xTFyk2WuMkSN1niJkvcZE255XWWXXseZjnlvo67ff6q34uVmyxxkyVussRNlrjJOuokzqy/P+tzVr9pd9fJmtNOBo2yt4SPJ26yxE2WuMkSN1lDJ3Huvudk9cmgXSePVt8Dc9otu+4t4eOJmyxxkyVussRN1tJ34uyaTtx978SV1VOjXe++WTWNsXKTJW6yxE2WuMkSN1kvpyV32Utw+i2jP3WXk0qjn/Pue2ms3GSJmyxxkyVussRN1stbXoc/ZNMJnU+zaxqz2qppmJWbLHGTJW6yxE2WuMlaehLnyq49G6NOO7lz2i21o979ziArN1niJkvcZImbLHGTNXQS58pp74I5bcox6rTp0Cyzfv5ueeXjiZsscZMlbrLETdaUkzinWT3tmfXvjnr3vR8/9e49JFefY+UmS9xkiZsscZMlbrKm7C3ZZdY7cWadAFo9zdjltBNS32XlJkvcZImbLHGTJW6yhu4tucsJkdVTiF3v0Nk1XTltKuIkDh9P3GSJmyxxkyVusqbc8jrrKf60p/K732dy2pRp1P/2YOUmS9xkiZsscZMlbrK2vBNntVX3YHz1Oavv/di1d2XXdOjKd7+nlZsscZMlbrLETZa4yUpOS67cZW/GaXtsrpz+87RykyVussRNlrjJEjdZU6Ylpz3dr94jcdr9JLvuP9n1zp3vsnKTJW6yxE2WuMkSN1lD05LT7rVY7bQTKFd2vdNnF7e88vHETZa4yRI3WeIm6/G8yyMyDLJykyVussRN1l8F2immyBsj/gAAAABJRU5ErkJggg==" />--> 688 <br>BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT 689 <br>ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76 690<hr> 691<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> 692<input type="hidden" name="cmd" value="_s-xclick"> 693<input type="hidden" name="hosted_button_id" value="FDGD82NBKQDHJ"> 694<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!"> 695<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 696</form> 697 </div> 698 <div class="modal-footer"> 699 <div class="btn-group btn-group-justified" role="group" aria-label="group button"> 700 <div class="btn-group" role="group"> 701 <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> 702 </div> 703 </div> 704 </div> 705 </div> 706 </div> 707</div> 708 709 </body> 710</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.