git.roojs.org Git - bootswatch/blob - index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <title>Bootswatch: Free themes for Bootstrap</title>
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6     <meta charset="utf-8">
   7     <link rel="stylesheet" href="./flatly/bootstrap.css" media="screen">
   8     <link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css">
   9     <link rel="stylesheet" href="./assets/css/bootswatch.min.css">
  10     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  11     <!--[if lt IE 9]>
  12       <script src="./bower_components/bootstrap/assets/js/html5shiv.js"></script>
  13       <script src="./bower_components/bootstrap/assets/js/respond.min.js"></script>
  14     <![endif]-->
  15     <script type="text/javascript">
  16
  17      var _gaq = _gaq || [];
  18       _gaq.push(['_setAccount', 'UA-23019901-1']);
  19       _gaq.push(['_setDomainName', "bootswatch.com"]);
  20         _gaq.push(['_setAllowLinker', true]);
  21       _gaq.push(['_trackPageview']);
  22
  23      (function() {
  24        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  25        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  26        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  27      })();
  28
  29     </script>
  30   </head>
  31   <body>
  32     <script src="./assets/js/bsa.js"></script>
  33
  34     <div class="navbar navbar-default navbar-fixed-top">
  35       <div class="container">
  36         <div class="navbar-header">
  37           <a href="./" class="navbar-brand">Bootswatch</a>
  38           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
  39             <span class="icon-bar"></span>
  40             <span class="icon-bar"></span>
  41             <span class="icon-bar"></span>
  42           </button>
  43         </div>
  44         <div class="navbar-collapse collapse" id="navbar-main">
  45           <ul class="nav navbar-nav">
  46             <li class="dropdown">
  47               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
  48               <ul class="dropdown-menu" aria-labelledby="themes">
  49                 <li><a tabindex="-1" href="./default/">Default</a></li>
  50                 <li class="divider"></li>
  51                 <li><a tabindex="-1" href="./amelia/">Amelia</a></li>
  52                 <li><a tabindex="-1" href="./cerulean/">Cerulean</a></li>
  53                 <li><a tabindex="-1" href="./cosmo/">Cosmo</a></li>
  54                 <li><a tabindex="-1" href="./cyborg/">Cyborg</a></li>
  55                 <li><a tabindex="-1" href="./flatly/">Flatly</a></li>
  56                 <li><a tabindex="-1" href="./journal/">Journal</a></li>
  57                 <li><a tabindex="-1" href="./readable/">Readable</a></li>
  58                 <li><a tabindex="-1" href="./simplex/">Simplex</a></li>
  59                 <li><a tabindex="-1" href="./slate/">Slate</a></li>
  60                 <li><a tabindex="-1" href="./spacelab/">Spacelab</a></li>
  61                 <li><a tabindex="-1" href="./united/">United</a></li>
  62               </ul>
  63             </li>
  64             <li>
  65               <a href="./help/">Help</a>
  66             </li>
  67             <li>
  68               <a href="http://news.bootswatch.com">Blog</a>
  69             </li>
  70           </ul>
  71
  72           <ul class="nav navbar-nav navbar-right">
  73             <li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li>
  74             <li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li>
  75           </ul>
  76
  77         </div>
  78       </div>
  79     </div>
  80
  81     <div class="splash">
  82       <div class="container">
  83
  84         <div class="row">
  85           <div class="col-lg-12">
  86             <h1>Free themes for Bootstrap</h1>
  87             <div id="social">
  88               <span>
  89                 <iframe id="gh-fork" src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe>
  90                 <iframe id="gh-star" src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
  91               </span>
  92               <span>
  93                 <a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @thomashpark</a>
  94                 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootswatch.com" data-via="thomashpark">Tweet</a>
  95               </span>
  96             </div>
  97           </div>
  98         </div>
  99
 100       </div>
 101     </div>
 102
 103     <div class="section-tout">
 104       <div class="container">
 105
 106         <div class="row">
 107           <div class="col-lg-4 col-sm-6">
 108             <h3><i class="icon-file-alt"></i> Easy to Install</h3>
 109             <p>Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.</p>
 110           </div>
 111           <div class="col-lg-4 col-sm-6">
 112             <h3><i class="icon-github"></i> Open Source</h3>
 113             <p>Bootstrap themes are licensed under Apache 2.0 and maintained by the community on <a target="_blank" href="https://github.com/thomaspark/bootswatch">GitHub</a>.</p>
 114           </div>
 115           <div class="col-lg-4 col-sm-6">
 116             <h3><i class="icon-wrench"></i> Tuned for 3.0.2</h3>
 117             <p>Themes are built for the latest version of Bootstrap. <a href="http://bootswatch.com/2/">Version 2.3.2</a> and <a target="_blank" href="https://github.com/thomaspark/bootswatch/tags">others</a> are also available to download.</p>
 118           </div>
 119           <div class="col-lg-4 col-sm-6">
 120             <h3><i class="icon-cogs"></i> Modular</h3>
 121              <p>Changes are contained in just two LESS files, enabling modification and ensuring forward compatibility.</p>
 122           </div>
 123           <div class="col-lg-4 col-sm-6">
 124             <h3><i class="icon-cloud"></i> Get Plugged In</h3>
 125             <p>An <a href="./help/#api" onclick="pageTracker._link(this.href); return false;">API</a> is available for integrating with your platform. In use by <a href="http://320press.com/wpbs/" target="_blank">WPBS</a>, <a href="http://www.fusionleaf.com/" target="_blank">FusionLeaf</a>, <a href="http://yabdab.com/stacks/snaps/bootsnap/" target="_blank">BootSnap</a>, and others.</p>
 126           </div>
 127           <div class="col-lg-4 col-sm-6">
 128             <h3><i class="icon-bullhorn"></i> Stay Updated</h3>
 129             <p>Be notified about updates by subscribing via <a href="http://feeds.feedburner.com/bootswatch">RSS feed</a>, <a href="http://feedburner.google.com/fb/a/mailverify?uri=bootswatch&loc=en_US">email</a>, or <a href="http://news.bootswatch.com" onclick="pageTracker._link(this.href); return false;">Tumblr</a>.</p>
 130           </div>
 131         </div>
 132
 133       </div>
 134     </div>
 135
 136     <div class="section-preview">
 137       <div class="container">
 138         <div class="row">
 139
 140           <div class="col-lg-4 col-sm-6">
 141             <div class="preview">
 142               <div class="image">
 143                 <a href="amelia/"><img src="amelia/thumbnail.png" class="img-responsive" alt="Amelia"></a>
 144               </div>
 145               <div class="options">
 146                 <h3>Amelia</h3>
 147                 <p>Sweet and cheery</p>
 148                 <div class="btn-group"><a class="btn btn-info" href="amelia/">Preview</a></div>
 149                 <div class="btn-group">
 150                   <a class="btn btn-info" target="_blank" href="amelia/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">Download</a>
 151                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 152                     <span class="caret"></span>
 153                   </a>
 154                   <ul class="dropdown-menu">
 155                     <li><a target="_blank" href="amelia/bootstrap.min.css"
 156                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 157                     <li><a target="_blank" href="amelia/bootstrap.css"
 158                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.css']);">bootstrap.css</a></li>
 159                     <li class="divider"></li>
 160                     <li><a target="_blank" href="amelia/variables.less"
 161                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'variables.less']);">variables.less</a></li>
 162                     <li><a target="_blank" href="amelia/bootswatch.less"
 163                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootswatch.less']);">bootswatch.less</a></li>
 164                   </ul>
 165                 </div>
 166               </div>
 167             </div>
 168           </div>
 169
 170           <div class="col-lg-4 col-sm-6">
 171             <div class="preview">
 172               <div class="image">
 173                 <a href="cerulean/"><img src="cerulean/thumbnail.png" class="img-responsive" alt="Cerulean"></a>
 174               </div>
 175               <div class="options">
 176                 <h3>Cerulean</h3>
 177                 <p>A calm, blue sky</p>
 178                 <div class="btn-group"><a class="btn btn-info" href="cerulean/">Preview</a></div>
 179                 <div class="btn-group">
 180                   <a class="btn btn-info" target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">Download</a>
 181                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 182                     <span class="caret"></span>
 183                   </a>
 184                   <ul class="dropdown-menu">
 185                     <li><a target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 186                     <li><a target="_blank" href="cerulean/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.css']);">bootstrap.css</a></li>
 187                     <li class="divider"></li>
 188                     <li><a target="_blank" href="cerulean/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'variables.less']);">variables.less</a></li>
 189                     <li><a target="_blank" href="cerulean/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootswatch.less']);">bootswatch.less</a></li>
 190                   </ul>
 191                 </div>
 192               </div>
 193             </div>
 194           </div>
 195
 196           <div class="col-lg-4 col-sm-6">
 197             <div class="preview">
 198               <div class="image">
 199                 <a href="cosmo/"><img class="img-responsive" src="cosmo/thumbnail.png" alt="Cosmo"></a>
 200               </div>
 201               <div class="options">
 202                 <h3>Cosmo</h3>
 203                 <p>An ode to Metro</p>
 204                 <div class="btn-group"><a class="btn btn-info" href="cosmo/">Preview</a></div>
 205                 <div class="btn-group">
 206                   <a class="btn btn-info" target="_blank" href="cosmo/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.min.css']);">Download</a>
 207                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 208                     <span class="caret"></span>
 209                   </a>
 210                   <ul class="dropdown-menu">
 211                     <li><a target="_blank" href="cosmo/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 212                     <li><a target="_blank" href="cosmo/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.css']);">bootstrap.css</a></li>
 213                     <li class="divider"></li>
 214                     <li><a target="_blank" href="cosmo/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'variables.less']);">variables.less</a></li>
 215                     <li><a target="_blank" href="cosmo/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootswatch.less']);">bootswatch.less</a></li>
 216                   </ul>
 217                 </div>
 218               </div>
 219             </div>
 220           </div>
 221
 222           <div class="col-lg-4 col-sm-6">
 223             <div class="preview">
 224               <div class="image">
 225                 <a href="cyborg/"><img class="img-responsive" src="cyborg/thumbnail.png" alt="Cyborg"></a>
 226               </div>
 227               <div class="options">
 228                 <h3>Cyborg</h3>
 229                 <p>Jet black and electric blue</p>
 230                 <div class="btn-group"><a class="btn btn-info" href="cyborg/">Preview</a></div>
 231                 <div class="btn-group">
 232                   <a class="btn btn-info" target="_blank" href="cyborg/bootstrap.min.css"
 233                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">Download</a>
 234                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 235                     <span class="caret"></span>
 236                   </a>
 237                   <ul class="dropdown-menu">
 238                     <li><a target="_blank" href="cyborg/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 239                     <li><a target="_blank" href="cyborg/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.css']);">bootstrap.css</a></li>
 240                     <li class="divider"></li>
 241                     <li><a target="_blank" href="cyborg/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'variables.less']);">variables.less</a></li>
 242                     <li><a target="_blank" href="cyborg/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootswatch.less']);">bootswatch.less</a></li>
 243                   </ul>
 244                 </div>
 245               </div>
 246             </div>
 247           </div>
 248
 249           <div class="col-lg-4 col-sm-6">
 250             <div class="preview">
 251               <div class="image">
 252                 <a href="flatly/"><img class="img-responsive" src="flatly/thumbnail.png" alt="Flatly"></a>
 253               </div>
 254               <div class="options">
 255                 <h3>Flatly</h3>
 256                 <p>Flat and modern</p>
 257                 <div class="btn-group"><a class="btn btn-info" href="flatly/">Preview</a></div>
 258                 <div class="btn-group">
 259                   <a class="btn btn-info" target="_blank" href="flatly/bootstrap.min.css"
 260                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.min.css']);">Download</a>
 261                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 262                     <span class="caret"></span>
 263                   </a>
 264                   <ul class="dropdown-menu">
 265                     <li><a target="_blank" href="flatly/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 266                     <li><a target="_blank" href="flatly/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.css']);">bootstrap.css</a></li>
 267                     <li class="divider"></li>
 268                     <li><a target="_blank" href="flatly/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'variables.less']);">variables.less</a></li>
 269                     <li><a target="_blank" href="flatly/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootswatch.less']);">bootswatch.less</a></li>
 270                   </ul>
 271                 </div>
 272               </div>
 273             </div>
 274           </div>
 275
 276           <div class="col-lg-4 col-sm-6">
 277             <div class="preview">
 278               <div class="image">
 279                 <a href="journal/"><img class="img-responsive" src="journal/thumbnail.png" alt="Journal"></a>
 280               </div>
 281               <div class="options">
 282                 <h3>Journal</h3>
 283                 <p>Crisp like a new sheet of paper</p>
 284                 <div class="btn-group"><a class="btn btn-info" href="journal/">Preview</a></div>
 285                 <div class="btn-group">
 286                   <a class="btn btn-info" target="_blank" href="journal/bootstrap.min.css"
 287                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">Download</a>
 288                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 289                     <span class="caret"></span>
 290                   </a>
 291                   <ul class="dropdown-menu">
 292                     <li><a target="_blank" href="journal/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 293                     <li><a target="_blank" href="journal/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.css']);">bootstrap.css</a></li>
 294                     <li class="divider"></li>
 295                     <li><a target="_blank" href="journal/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'variables.less']);">variables.less</a></li>
 296                     <li><a target="_blank" href="journal/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootswatch.less']);">bootswatch.less</a></li>
 297                   </ul>
 298                 </div>
 299               </div>
 300             </div>
 301           </div>
 302
 303           <div class="col-lg-4 col-sm-6">
 304             <div class="preview">
 305               <div class="image">
 306                 <a href="readable/"><img class="img-responsive" src="readable/thumbnail.png" alt="Readable"></a>
 307               </div>
 308               <div class="options">
 309                 <h3>Readable</h3>
 310                 <p>Optimized for legibility</p>
 311                 <div class="btn-group"><a class="btn btn-info" href="readable/">Preview</a></div>
 312                 <div class="btn-group">
 313                   <a class="btn btn-info" target="_blank" href="readable/bootstrap.min.css"
 314                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">Download</a>
 315                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 316                     <span class="caret"></span>
 317                   </a>
 318                   <ul class="dropdown-menu">
 319                     <li><a target="_blank" href="readable/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 320                     <li><a target="_blank" href="readable/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.css']);">bootstrap.css</a></li>
 321                     <li class="divider"></li>
 322                     <li><a target="_blank" href="readable/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'variables.less']);">variables.less</a></li>
 323                     <li><a target="_blank" href="readable/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootswatch.less']);">bootswatch.less</a></li>
 324                   </ul>
 325                 </div>
 326               </div>
 327             </div>
 328           </div>
 329
 330           <div class="col-lg-4 col-sm-6">
 331
 332             <div class="preview">
 333               <div class="image">
 334                 <a href="simplex/"><img class="img-responsive" src="simplex/thumbnail.png" alt="Simplex"></a>
 335               </div>
 336               <div class="options">
 337
 338                 <h3>Simplex</h3>
 339                 <p>Mini and minimalist</p>
 340                 <div class="btn-group"><a class="btn btn-info" href="simplex/">Preview</a></div>
 341                 <div class="btn-group">
 342                   <a class="btn btn-info" target="_blank" href="simplex/bootstrap.min.css"
 343                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">Download</a>
 344                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 345                     <span class="caret"></span>
 346                   </a>
 347                   <ul class="dropdown-menu">
 348                     <li><a target="_blank" href="simplex/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 349                     <li><a target="_blank" href="simplex/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.css']);">bootstrap.css</a></li>
 350                     <li class="divider"></li>
 351                     <li><a target="_blank" href="simplex/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'variables.less']);">variables.less</a></li>
 352                     <li><a target="_blank" href="simplex/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootswatch.less']);">bootswatch.less</a></li>
 353                   </ul>
 354                 </div>
 355
 356               </div>
 357             </div>
 358
 359           </div>
 360           <div class="col-lg-4 col-sm-6">
 361
 362             <div class="preview">
 363               <div class="image">
 364                 <a href="slate/"><img class="img-responsive" src="slate/thumbnail.png" alt="Slate"></a>
 365               </div>
 366               <div class="options">
 367
 368                 <h3>Slate</h3>
 369                 <p>Shades of gunmetal gray</p>
 370                 <div class="btn-group"><a class="btn btn-info" href="slate/">Preview</a></div>
 371                 <div class="btn-group">
 372                   <a class="btn btn-info" target="_blank" href="slate/bootstrap.min.css"
 373                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">Download</a>
 374                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 375                     <span class="caret"></span>
 376                   </a>
 377                   <ul class="dropdown-menu">
 378                     <li><a target="_blank" href="slate/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 379                     <li><a target="_blank" href="slate/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.css']);">bootstrap.css</a></li>
 380                     <li class="divider"></li>
 381                     <li><a target="_blank" href="slate/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'variables.less']);">variables.less</a></li>
 382                     <li><a target="_blank" href="slate/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootswatch.less']);">bootswatch.less</a></li>
 383                   </ul>
 384                 </div>
 385
 386               </div>
 387             </div>
 388
 389           </div>
 390           <div class="col-lg-4 col-sm-6">
 391
 392             <div class="preview">
 393               <div class="image">
 394                 <a href="spacelab/"><img class="img-responsive" src="spacelab/thumbnail.png" alt="Spacelab"></a>
 395               </div>
 396               <div class="options">
 397
 398                 <h3>Spacelab</h3>
 399                 <p>Silvery and sleek</p>
 400                 <div class="btn-group"><a class="btn btn-info" href="spacelab/">Preview</a></div>
 401                 <div class="btn-group">
 402                   <a class="btn btn-info" target="_blank" href="spacelab/bootstrap.min.css"
 403                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">Download</a>
 404                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 405                     <span class="caret"></span>
 406                   </a>
 407                   <ul class="dropdown-menu">
 408                     <li><a target="_blank" href="spacelab/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 409                     <li><a target="_blank" href="spacelab/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.css']);">bootstrap.css</a></li>
 410                     <li class="divider"></li>
 411                     <li><a target="_blank" href="spacelab/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'variables.less']);">variables.less</a></li>
 412                     <li><a target="_blank" href="spacelab/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootswatch.less']);">bootswatch.less</a></li>
 413                   </ul>
 414                 </div>
 415
 416               </div>
 417             </div>
 418
 419           </div>
 420          <!--  <div class="col-lg-4 col-sm-6">
 421
 422             <div class="preview">
 423               <div class="image">
 424                 <a href="superhero/"><img class="img-responsive" src="superhero/thumbnail.png" alt="Superhero"></a>
 425               </div>
 426               <div class="options">
 427
 428                 <h3>Superhero</h3>
 429                 <p>Batman meets... Aquaman?</p>
 430                 <div class="btn-group"><a class="btn btn-info" href="superhero/">Preview</a></div>
 431                 <div class="btn-group">
 432                   <a class="btn btn-info" target="_blank" href="superhero/bootstrap.min.css"
 433                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">Download</a>
 434                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 435                     <span class="caret"></span>
 436                   </a>
 437                   <ul class="dropdown-menu">
 438                     <li><a target="_blank" href="superhero/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 439                     <li><a target="_blank" href="superhero/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.css']);">bootstrap.css</a></li>
 440                     <li class="divider"></li>
 441                     <li><a target="_blank" href="superhero/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'variables.less']);">variables.less</a></li>
 442                     <li><a target="_blank" href="superhero/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootswatch.less']);">bootswatch.less</a></li>
 443                   </ul>
 444                 </div>
 445
 446               </div>
 447             </div>
 448
 449           </div> -->
 450           <div class="col-lg-4 col-sm-6">
 451
 452             <div class="preview">
 453               <div class="image">
 454                 <a href="united/"><img class="img-responsive" src="united/thumbnail.png" alt="United"></a>
 455               </div>
 456               <div class="options">
 457
 458                 <h3>United</h3>
 459                 <p>Ubuntu orange and unique font</p>
 460                 <div class="btn-group"><a class="btn btn-info" href="united/">Preview</a></div>
 461                 <div class="btn-group">
 462                   <a class="btn btn-info" target="_blank" href="united/bootstrap.min.css"
 463                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">Download</a>
 464                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 465                     <span class="caret"></span>
 466                   </a>
 467                   <ul class="dropdown-menu">
 468                     <li><a target="_blank" href="united/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 469                     <li><a target="_blank" href="united/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.css']);">bootstrap.css</a></li>
 470                     <li class="divider"></li>
 471                     <li><a target="_blank" href="united/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'variables.less']);">variables.less</a></li>
 472                     <li><a target="_blank" href="united/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootswatch.less']);">bootswatch.less</a></li>
 473                   </ul>
 474                 </div>
 475
 476               </div>
 477             </div>
 478
 479           </div>
 480
 481
 482
 483         </div>
 484       </div>
 485
 486
 487       <div class="container">
 488         <div class="row">
 489
 490           <div class="col-lg-12">
 491             <h1>Want more?</h1>
 492             <p class="lead">Check out my personal faves from the paid templates at <a target="_blank" href="https://wrapbootstrap.com/?ref=bsw" title="Marketplace for premium Bootstrap templates" onclick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap']);">WrapBootstrap</a>.</p>
 493           </div>
 494           <div class="col-lg-4 col-sm-4">
 495             <div class="preview">
 496               <div class="image">
 497                 <a target="_blank" href="http://wrapbootstrap.com/preview/WB02634G3?ref=bsw"><img class="img-responsive" src="https://s3.amazonaws.com/wrapbootstrap/live/products/600x375/WB02634G3.png" alt="Clean Canvas"></a>
 498               </div>
 499               <div class="options">
 500                 <h3>Clean Canvas</h3>
 501                 <p>A beautiful showcase for your works</p>
 502                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB02634G3?ref=bsw">Preview</a></div>
 503                 <div class="btn-group">
 504                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/clean-canvas-business-theme-WB02634G3?ref=bsw"
 505                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-cleancanvas']);">Info</a>
 506                 </div>
 507               </div>
 508             </div>
 509           </div>
 510
 511           <div class="col-lg-4 col-sm-4">
 512             <div class="preview">
 513               <div class="image">
 514                 <a target="_blank" href="http://wrapbootstrap.com/preview/WB0L500N4?ref=bsw"><img class="img-responsive" src="https://s3.amazonaws.com/wrapbootstrap/live/products/600x375/WB0L500N4.png" alt="Front Row"></a>
 515               </div>
 516               <div class="options">
 517                 <h3>Front Row</h3>
 518                 <p>An elegant single-page template</p>
 519                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB0L500N4?ref=bsw">Preview</a></div>
 520                 <div class="btn-group">
 521                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/front-row-one-page-theme-WB0L500N4?ref=bsw"
 522                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-frontrow']);">Info</a>
 523                 </div>
 524               </div>
 525             </div>
 526           </div>
 527
 528           <div class="col-lg-4 col-sm-4">
 529             <div class="preview">
 530               <div class="image">
 531                 <a target="_blank" class="img-responsive" href="http://wrapbootstrap.com/preview/WB00U99JJ?ref=bsw"><img class="img-responsive" src="https://s3.amazonaws.com/wrapbootstrap/live/products/600x375/WB00U99JJ.png" alt="Clean Canvas"></a>
 532               </div>
 533               <div class="options">
 534                 <h3>Base Admin</h3>
 535                 <p>A polished template for an admin dashboard</p>
 536                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB00U99JJ?ref=bsw">Preview</a></div>
 537                 <div class="btn-group">
 538                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/base-admin-WB00U99JJ?ref=bsw"
 539                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-baseadmin']);">Info</a>
 540                 </div>
 541               </div>
 542             </div>
 543           </div>
 544
 545         </div>
 546
 547         <div class="row">
 548           <div class="col-lg-12">
 549             <h1>Still looking?</h1>
 550             <p class="lead">Learn to code your own themes with these books from <a target="_blank" href="http://www.amazon.com/?tag=bootswatch-20">Amazon</a>.</p>
 551           </div>
 552           <div class="col-lg-4 col-sm-4">
 553             <div class="preview">
 554               <div class="image">
 555                 <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'htmlandcss']);" href="http://www.amazon.com/gp/product/1118008189/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1118008189" target="_blank"><img class="img-responsive" src="assets/img/refs/htmlandcss.png" alt="HTML and CSS: Design and Build Websites, by Jon Duckett"></a>
 556
 557               </div>
 558               <div class="options">
 559                 <h3>HTML &amp; CSS</h3>
 560                 <p>Jon Duckett</p>
 561                 <div>
 562                   <img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=1118008189" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; height: 1px;" />
 563                   <div class="btn-group"><a class="btn btn-info" onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'htmlandcss']);" href="http://www.amazon.com/gp/product/1118008189/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1118008189" target="_blank">Amazon</a></div>
 564                 </div>
 565               </div>
 566             </div>
 567           </div>
 568           <div class="col-lg-4 col-sm-4">
 569             <div class="preview">
 570               <div class="image">
 571
 572                 <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'lesscss']);" href="http://www.amazon.com/gp/product/178216376X/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=178216376X" target="_blank"><img class="img-responsive" src="assets/img/refs/lesscss.jpg" alt="Instant LESS CSS Preprocessor How-to, by Alex Libby"></a>
 573
 574               </div>
 575               <div class="options">
 576
 577                 <h3>Instant LESS</h3>
 578                 <p>Alex Libby</p>
 579                 <div>
 580                   <img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=1449399029" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; height: 1px;" />
 581                   <div class="btn-group"><a class="btn btn-info" onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'lesscss']);" href="http://www.amazon.com/gp/product/178216376X/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=178216376X" target="_blank">Amazon</a></div>
 582                 </div>
 583               </div>
 584             </div>
 585           </div>
 586           <div class="col-lg-4 col-sm-4">
 587             <div class="preview">
 588               <div class="image">
 589
 590                 <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'beautifulwebdesign']);" href="http://www.amazon.com/gp/product/098057689X/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=098057689X" target="_blank"><img class="img-responsive" src="assets/img/refs/beautifulwebdesign.png" alt="The Principles of Beautiful Web Design, by Jason Beaird"></a>
 591
 592               </div>
 593               <div class="options">
 594
 595                 <h3>Beautiful Web Design</h3>
 596                 <p>Jason Beaird</p>
 597                 <div>
 598                   <img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=098057689X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; height: 1px;" />
 599                   <div class="btn-group"><a class="btn btn-info" onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'beautifulwebdesign']);" href="http://www.amazon.com/gp/product/098057689X/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=098057689X" target="_blank">Amazon</a></div>
 600                 </div>
 601               </div>
 602             </div>
 603           </div>
 604         </div>
 605
 606
 607
 608       </div>
 609     </div>
 610
 611     <div class="container">
 612       <footer>
 613         <div class="row">
 614           <div class="col-lg-12">
 615
 616             <ul class="list-unstyled">
 617               <li class="pull-right"><a href="#top">Back to top</a></li>
 618               <li><a href="http://news.bootswatch.com" onclick="pageTracker._link(this.href); return false;">Blog</a></li>
 619               <li><a href="http://feeds.feedburner.com/bootswatch">RSS</a></li>
 620               <li><a href="https://twitter.com/thomashpark">Twitter</a></li>
 621               <li><a href="https://github.com/thomaspark/bootswatch/">GitHub</a></li>
 622               <li><a href="./help/#api">API</a></li>
 623               <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=F22JEM3Q78JC2">Donate</a></li>
 624             </ul>
 625             <p>Made by <a href="http://thomaspark.me">Thomas Park</a>. Contact him at <a href="mailto:hello@thomaspark.me">hello@thomaspark.me</a>.</p>
 626             <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.</p>
 627             <p>Based on <a href="http://getbootstrap.com">Bootstrap</a>. Icons from <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>. Web fonts from <a href="http://www.google.com/webfonts">Google</a>. Favicon by <a href="https://twitter.com/geraldhiller">Gerald Hiller</a>.</p>
 628
 629           </div>
 630         </div>
 631
 632       </footer>
 633
 634
 635     </div>
 636
 637
 638     <script src="./bower_components/jquery/jquery.min.js"></script>
 639     <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 640     <script src="./assets/js/bootswatch.js"></script>
 641     <script type="text/javascript">
 642       !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
 643     </script>
 644   </body>
 645 </html>