mirror of
https://github.com/thomaspark/bootswatch.git
synced 2025-10-07 10:04:05 +00:00
992 lines
63 KiB
HTML
992 lines
63 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Bootswatch: Free themes for Bootstrap</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="./materia/bootstrap.css">
|
|
<link rel="stylesheet" href="./_vendor/font-awesome/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="./_assets/css/custom.min.css">
|
|
<!-- Global Site Tag (gtag.js) - Google Analytics -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KGDJBEFF3W"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-KGDJBEFF3W');
|
|
</script>
|
|
</head>
|
|
<body id="home">
|
|
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary navbar-transparent">
|
|
<div class="container">
|
|
<a href="./" class="navbar-brand">
|
|
<img class="d-inline-block mx-2" src="_assets/img/logo.svg" alt="" width="30" height="28">
|
|
Bootswatch
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarResponsive">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
|
|
<div class="dropdown-menu" aria-labelledby="themes">
|
|
<a class="dropdown-item" href="./default/">Default</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="./cerulean/">Cerulean</a>
|
|
<a class="dropdown-item" href="./cosmo/">Cosmo</a>
|
|
<a class="dropdown-item" href="./cyborg/">Cyborg</a>
|
|
<a class="dropdown-item" href="./darkly/">Darkly</a>
|
|
<a class="dropdown-item" href="./flatly/">Flatly</a>
|
|
<a class="dropdown-item" href="./journal/">Journal</a>
|
|
<a class="dropdown-item" href="./litera/">Litera</a>
|
|
<a class="dropdown-item" href="./lumen/">Lumen</a>
|
|
<a class="dropdown-item" href="./lux/">Lux</a>
|
|
<a class="dropdown-item" href="./materia/">Materia</a>
|
|
<a class="dropdown-item" href="./minty/">Minty</a>
|
|
<a class="dropdown-item" href="./pulse/">Pulse</a>
|
|
<a class="dropdown-item" href="./sandstone/">Sandstone</a>
|
|
<a class="dropdown-item" href="./simplex/">Simplex</a>
|
|
<a class="dropdown-item" href="./sketchy/">Sketchy</a>
|
|
<a class="dropdown-item" href="./slate/">Slate</a>
|
|
<a class="dropdown-item" href="./solar/">Solar</a>
|
|
<a class="dropdown-item" href="./spacelab/">Spacelab</a>
|
|
<a class="dropdown-item" href="./superhero/">Superhero</a>
|
|
<a class="dropdown-item" href="./united/">United</a>
|
|
<a class="dropdown-item" href="./yeti/">Yeti</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./help/">Help</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://blog.bootswatch.com/">Blog</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="splash">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1>Free themes for Bootstrap</h1>
|
|
<div id="social">
|
|
<span>
|
|
<iframe id="gh-fork" src="https://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=fork" width="53" height="20"></iframe>
|
|
<iframe id="gh-star" src="https://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=star&count=true" width="110" height="20"></iframe>
|
|
</span>
|
|
<span style="display: inline-block; width: 240px;">
|
|
<a href="https://twitter.com/bootswatch" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true"></a>
|
|
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://bootswatch.com/" data-via="bootswatch"></a>
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-8 mx-auto">
|
|
<div class="alert" style="background-color: rgba(0, 0, 0, 0.3)">
|
|
These themes are for Bootstrap 4. <a style="color: #fff; text-decoration: underline;" href="../">Check out the latest version of Bootswatch!</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mx-auto">
|
|
<div class="sponsor">
|
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIE23N&placement=bootswatchcom" id="_carbonads_js"></script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-tout">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="icon"><i class="fa fa-file-o"></i></div>
|
|
<h4>Easy to Install</h4>
|
|
<p>Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.</p>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="icon"><i class="fa fa-cogs"></i></div>
|
|
<h4>Customizable</h4>
|
|
<p>Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility.</p>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="icon"><i class="fa fa-wrench"></i></div>
|
|
<h4>Tuned for 4.6.2</h4>
|
|
<p>Themes are built for the latest version of Bootstrap. <a href="../2/">2.3.2</a>, <a href="../3/">3.4.1</a>, and <a target="_blank" rel="noopener noreferrer" href="https://github.com/thomaspark/bootswatch/tags">other releases</a> are also available to download.</p>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="icon"><i class="fa fa-github"></i></div>
|
|
<h4>Open Source</h4>
|
|
<p>Bootstrap themes are released under the MIT License and maintained by the community on <a target="_blank" rel="noopener noreferrer" href="https://github.com/thomaspark/bootswatch">GitHub</a>.</p>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="icon"><i class="fa fa-plug"></i></div>
|
|
<h4>Get Plugged In</h4>
|
|
<p>An <a href="./help/#api">API</a> is available for integrating with your platform. In use by <a href="https://nodebb.org/" target="_blank" rel="noopener noreferrer">NodeBB</a> and many more.</p>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="icon"><i class="fa fa-bullhorn"></i></div>
|
|
<h4>Stay Updated</h4>
|
|
<p>Be notified about updates by subscribing via <a href="https://blog.bootswatch.com/rss/">RSS feed</a>, <a href="https://feedburner.google.com/fb/a/mailverify?uri=bootswatch&loc=en_US">email</a>, <a href="https://twitter.com/bootswatch">Twitter</a>, or <a href="https://blog.bootswatch.com/">Tumblr</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-preview">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="cerulean/">
|
|
<img src="cerulean/thumbnail.png" class="img-fluid" alt="Cerulean" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Cerulean</h3>
|
|
<p>A calm blue sky</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="cerulean/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./cerulean/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./cerulean/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./cerulean/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./cerulean/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./cerulean/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="cosmo/">
|
|
<img class="img-fluid" src="cosmo/thumbnail.png" alt="Cosmo" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Cosmo</h3>
|
|
<p>An ode to Metro</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="cosmo/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./cosmo/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./cosmo/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./cosmo/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./cosmo/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./cosmo/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="cyborg/">
|
|
<img class="img-fluid" src="cyborg/thumbnail.png" alt="Cyborg" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Cyborg</h3>
|
|
<p>Jet black and electric blue</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="cyborg/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./cyborg/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./cyborg/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./cyborg/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./cyborg/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./cyborg/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="darkly/">
|
|
<img class="img-fluid" src="darkly/thumbnail.png" alt="Darkly" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Darkly</h3>
|
|
<p>Flatly in night mode</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="darkly/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./darkly/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./darkly/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./darkly/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./darkly/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./darkly/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="flatly/">
|
|
<img class="img-fluid" src="flatly/thumbnail.png" alt="Flatly" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Flatly</h3>
|
|
<p>Flat and modern</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="flatly/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./flatly/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./flatly/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./flatly/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./flatly/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./flatly/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="journal/">
|
|
<img class="img-fluid" src="journal/thumbnail.png" alt="Journal" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Journal</h3>
|
|
<p>Crisp like a new sheet of paper</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="journal/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./journal/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./journal/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./journal/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./journal/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./journal/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="litera/">
|
|
<img class="img-fluid" src="litera/thumbnail.png" alt="Litera" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Litera</h3>
|
|
<p>The medium is the message</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="litera/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./litera/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./litera/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./litera/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./litera/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./litera/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="lumen/">
|
|
<img src="lumen/thumbnail.png" class="img-fluid" alt="Lumen" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Lumen</h3>
|
|
<p>Light and shadow</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="lumen/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./lumen/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./lumen/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./lumen/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./lumen/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./lumen/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="lux/">
|
|
<img src="lux/thumbnail.png" class="img-fluid" alt="Lux" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Lux</h3>
|
|
<p>A touch of class</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="lux/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./lux/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./lux/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./lux/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./lux/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./lux/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="materia/">
|
|
<img class="img-fluid" src="materia/thumbnail.png" alt="Materia" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Materia</h3>
|
|
<p>Material is the metaphor</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="materia/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./materia/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./materia/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./materia/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./materia/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./materia/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="minty/">
|
|
<img src="minty/thumbnail.png" class="img-fluid" alt="Minty" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Minty</h3>
|
|
<p>A fresh feel</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="minty/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./minty/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./minty/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./minty/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./minty/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./minty/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="pulse/">
|
|
<img src="pulse/thumbnail.png" class="img-fluid" alt="Pulse" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Pulse</h3>
|
|
<p>A trace of purple</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="pulse/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./pulse/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./pulse/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./pulse/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./pulse/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./pulse/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="sandstone/">
|
|
<img src="sandstone/thumbnail.png" class="img-fluid" alt="Sandstone" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Sandstone</h3>
|
|
<p>A touch of warmth</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="sandstone/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./sandstone/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./sandstone/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./sandstone/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./sandstone/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./sandstone/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="simplex/">
|
|
<img class="img-fluid" src="simplex/thumbnail.png" alt="Simplex" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Simplex</h3>
|
|
<p>Mini and minimalist</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="simplex/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./simplex/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./simplex/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./simplex/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./simplex/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./simplex/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="sketchy/">
|
|
<img class="img-fluid" src="sketchy/thumbnail.png" alt="Sketchy" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Sketchy</h3>
|
|
<p>A hand-drawn look for mockups and mirth</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="sketchy/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./sketchy/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./sketchy/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./sketchy/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./sketchy/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./sketchy/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="slate/">
|
|
<img class="img-fluid" src="slate/thumbnail.png" alt="Slate" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Slate</h3>
|
|
<p>Shades of gunmetal gray</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="slate/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./slate/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./slate/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./slate/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./slate/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./slate/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="solar/">
|
|
<img class="img-fluid" src="solar/thumbnail.png" alt="Solar" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Solar</h3>
|
|
<p>A spin on Solarized</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="solar/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./solar/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./solar/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./solar/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./solar/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./solar/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="spacelab/">
|
|
<img class="img-fluid" src="spacelab/thumbnail.png" alt="Spacelab" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Spacelab</h3>
|
|
<p>Silvery and sleek</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="spacelab/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./spacelab/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./spacelab/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./spacelab/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./spacelab/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./spacelab/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="superhero/">
|
|
<img class="img-fluid" src="superhero/thumbnail.png" alt="Superhero" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Superhero</h3>
|
|
<p>The brave and the blue</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="superhero/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./superhero/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./superhero/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./superhero/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./superhero/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./superhero/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="united/">
|
|
<img class="img-fluid" src="united/thumbnail.png" alt="United" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>United</h3>
|
|
<p>Ubuntu orange and unique font</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="united/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./united/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./united/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./united/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./united/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./united/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="yeti/">
|
|
<img class="img-fluid" src="yeti/thumbnail.png" alt="Yeti" width="350" height="210" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Yeti</h3>
|
|
<p>A friendly foundation</p>
|
|
<div class="btn-group"><a class="btn btn-primary" href="yeti/">Preview</a></div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="./yeti/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.min.css'});" download>Download</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="./yeti/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
|
|
<a class="dropdown-item" href="./yeti/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
|
|
<div class="divider"></div>
|
|
<a class="dropdown-item" href="./yeti/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': '_variables.scss'});" download>_variables.scss</a>
|
|
<a class="dropdown-item" href="./yeti/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1>Want more?</h1>
|
|
<p class="lead">Check out these premium templates from <a rel="noopener" target="_blank" href="https://gumroad.com/a/862303347" title="Marketplace for premium Bootstrap templates" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': '3rdwave'});">3rd Wave Media</a>.</p>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a rel="noopener" target="_blank" class="img-fluid" href="https://gumroad.com/a/233731187" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'launch'});">
|
|
<img class="img-fluid" src="_assets/img/refs/themes.3rdwavemedia.com_launch-bootstrap-template-for-saas-businesses.png" alt="Launch" width="350" height="219" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Launch</h3>
|
|
<p>A template for SaaS businesses</p>
|
|
<div>
|
|
<a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/233731187" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'launch'});">View Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a rel="noopener" target="_blank" class="img-fluid" href="https://gumroad.com/a/929412211" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'instance'});">
|
|
<img class="img-fluid" src="_assets/img/refs/themes.3rdwavemedia.com_instance-bootstrap-portfolio-template-for-developers.png" alt="Instance" width="350" height="219" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Instance</h3>
|
|
<p>A personal portfolio template for developers</p>
|
|
<div>
|
|
<a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/929412211" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'instance'});">View Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a rel="noopener" target="_blank" class="img-fluid" href="https://gumroad.com/a/927839347" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'startupkit'});">
|
|
<img class="img-fluid" src="_assets/img/refs/themes.3rdwavemedia.com_startupkit-startup-bootstrap-template.png" alt="Startup Kit" width="350" height="219" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Startup Kit</h3>
|
|
<p>A Bootstrap template for SaaS startups</p>
|
|
<div>
|
|
<a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/927839347" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'startupkit'});">View Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'coderpro'});">
|
|
<img class="img-fluid" src="_assets/img/refs/themes.3rdwavemedia.com_coderpro_bs4_-700.png" alt="CoderPro" width="350" height="197" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>CoderPro</h3>
|
|
<p>Startup template for software projects</p>
|
|
<div>
|
|
<a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/392541299" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'coderpro'});">View Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a rel="noopener" target="_blank" href="https://gumroad.com/a/1063629939" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'novapro'});">
|
|
<img class="img-fluid" src="_assets/img/refs/themes.3rdwavemedia.com_nova-pro_bs4_-700.png" alt="Nova Pro" width="350" height="197" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Nova Pro</h3>
|
|
<p>The best way to promote your mobile app</p>
|
|
<div>
|
|
<a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/1063629939" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'novapro'});">View Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a rel="noopener" target="_blank" class="img-fluid" href="https://gumroad.com/a/145077363" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'devcard'});">
|
|
<img class="img-fluid" src="_assets/img/refs/themes.3rdwavemedia.com_devcard_bs4_2.0_-700.png" alt="Dev Card" width="350" height="197" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Dev Card</h3>
|
|
<p>A portfolio template for developers</p>
|
|
<div>
|
|
<a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/145077363" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'devcard'});">View Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1>Still looking?</h1>
|
|
<p class="lead">Learn to code your own themes with these books from <a rel="noopener nofollow" target="_blank" href="https://www.amazon.com/?tag=bootswatch-20">Amazon</a>. As an associate, we earn a cut of each sale.</p>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'htmlandcss'});" href="https://www.amazon.com/gp/product/1118907442/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1118907442" rel="noopener nofollow" target="_blank">
|
|
<img class="img-fluid" src="_assets/img/refs/htmlandcss.png" alt="HTML and CSS: Design and Build Websites, by Jon Duckett" width="350" height="236" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>HTML & CSS</h3>
|
|
<p>Jon Duckett</p>
|
|
<div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'htmlandcss'});" href="https://www.amazon.com/gp/product/1118907442/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1118907442" rel="noopener nofollow" target="_blank">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'eloquentjavascript'});" href="https://www.amazon.com/gp/product/1593279507/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1593279507" rel="noopener nofollow" target="_blank">
|
|
<img class="img-fluid" src="_assets/img/refs/eloquentjavascript.png" alt="Eloquent JavaScript, by Marijn Haverbeke" width="350" height="236" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Eloquent JavaScript</h3>
|
|
<p>Marijn Haverbeke</p>
|
|
<div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'eloquentjavascript'});" href="https://www.amazon.com/gp/product/1593279507/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1593279507" rel="noopener nofollow" target="_blank">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'csssecrets'});" href="https://www.amazon.com/gp/product/1449372635/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1449372635" rel="noopener nofollow" target="_blank">
|
|
<img class="img-fluid" src="_assets/img/refs/csssecrets.png" alt="CSS Secrets: Better Solutions to Everyday Web Design Problems by Lea Verou" width="350" height="236" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>CSS Secrets</h3>
|
|
<p>Lea Verou</p>
|
|
<div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'csssecrets'});" href="https://www.amazon.com/gp/product/1449372635/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1449372635" rel="noopener nofollow" target="_blank">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1>Good luck have fun!</h1>
|
|
<p class="lead">Or learn to code by playing games with <a rel="noopener" target="_blank" href="https://codepip.com">Codepip</a>.</p>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="https://codepip.com/games/flexbox-froggy/" rel="noopener" target="_blank">
|
|
<img class="img-fluid" src="_assets/img/refs/flexbox-froggy-pro.png" alt="Flexbox Froggy: A game for learning CSS Flexbox" width="350" height="233" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Flexbox Froggy</h3>
|
|
<p>A game for learning CSS Flexbox</p>
|
|
<div>
|
|
<div class="btn-group"><a class="btn btn-primary" href="https://codepip.com/games/flexbox-froggy/" rel="noopener" target="_blank">Play Now</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="https://codepip.com/games/grid-garden/" rel="noopener" target="_blank">
|
|
<img class="img-fluid" src="_assets/img/refs/grid-garden.png" alt="Grid Garden: A game for learning CSS Grid" width="350" height="233" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Grid Garden</h3>
|
|
<p>A game for learning CSS Grid</p>
|
|
<div>
|
|
<div class="btn-group"><a class="btn btn-primary" href="https://codepip.com/games/grid-garden/" rel="noopener" target="_blank">Play Now</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="preview">
|
|
<div class="image">
|
|
<a href="https://codepip.com/games/code-crunchers/" rel="noopener" target="_blank">
|
|
<img class="img-fluid" src="_assets/img/refs/code-crunchers.png" alt="Code Crunchers: A game for learning JavaScript Math" width="350" height="233" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="options">
|
|
<h3>Code Crunchers</h3>
|
|
<p>A game for learning JavaScript Math</p>
|
|
<div>
|
|
<div class="btn-group"><a class="btn btn-primary" href="https://codepip.com/games/code-crunchers/" rel="noopener" target="_blank">Play Now</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<footer id="footer">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<ul class="list-unstyled">
|
|
<li class="float-lg-right"><a href="#top">Back to top</a></li>
|
|
<li><a href="https://blog.bootswatch.com/">Blog</a></li>
|
|
<li><a href="https://blog.bootswatch.com/rss/">RSS</a></li>
|
|
<li><a href="https://twitter.com/bootswatch">Twitter</a></li>
|
|
<li><a href="https://github.com/thomaspark/bootswatch">GitHub</a></li>
|
|
<li><a href="./help/#api">API</a></li>
|
|
<li><a href="./help/#donate">Donate</a></li>
|
|
</ul>
|
|
<p>Made by <a href="https://thomaspark.co/">Thomas Park</a>.</p>
|
|
<p>Code released under the <a href="https://github.com/thomaspark/bootswatch/blob/master/LICENSE">MIT License</a>.</p>
|
|
<p>Based on <a href="https://getbootstrap.com/" rel="nofollow">Bootstrap</a>. Icons from <a href="https://fontawesome.com/" rel="nofollow">Font Awesome</a>. Web fonts from <a href="https://fonts.google.com/" rel="nofollow">Google</a>.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="./_vendor/jquery/dist/jquery.min.js"></script>
|
|
<script src="./_vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="./_assets/js/custom.js"></script>
|
|
<script>
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
</script>
|
|
</body>
|
|
</html>
|