hazza/bootswatch
1
0
Fork 0
mirror of https://github.com/thomaspark/bootswatch.git synced 2025-10-07 01:54:07 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
c11f56fdced5cbba4a3966037a7106656ba1736f
bootswatch/docs/index.html
Thomas Park 6c4ea3bbde update to v5.3.7
2025-06-24 22:36:22 -04:00

1217 lines
86 KiB
HTML
Raw Blame History

<!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="./5/zephyr/bootstrap.css">
<link rel="stylesheet" href="./_vendor/bootstrap-icons/font/bootstrap-icons.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 bg-primary navbar-transparent" data-bs-theme="dark">
<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-bs-toggle="collapse" data-bs-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" data-bs-theme="light">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="themes">Themes</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="./brite/">Brite</a>
<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="./morph/">Morph</a>
<a class="dropdown-item" href="./pulse/">Pulse</a>
<a class="dropdown-item" href="./quartz/">Quartz</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="./vapor/">Vapor</a>
<a class="dropdown-item" href="./yeti/">Yeti</a>
<a class="dropdown-item" href="./zephyr/">Zephyr</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>
<ul class="navbar-nav ms-md-auto">
<li class="nav-item">
<a target="_blank" rel="noopener" class="nav-link" href="https://github.com/thomaspark/bootswatch/"><i class="bi bi-github"></i><span class="d-lg-none ms-2">GitHub</span></a>
</li>
<li class="nav-item">
<a target="_blank" rel="noopener" class="nav-link" href="https://twitter.com/bootswatch"><i class="bi bi-twitter"></i><span class="d-lg-none ms-2">Twitter</span></a>
</li>
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none my-2 text-white-50">
</li>
<li class="nav-item dropdown" data-bs-theme="light">
<a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="version-menu" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme">
<span class="d-lg-none me-2">Bootstrap </span>
<span>v5.3</span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a href="https://bootswatch.com/" class="dropdown-item d-flex align-items-center justify-content-between" aria-current="true">
<span class="ms-2">v5.3.x</span><i class="bi bi-check"></i>
</a>
</li>
<li>
<a href="https://bootswatch.com/4/" class="dropdown-item d-flex align-items-center justify-content-between">
<span class="ms-2">v4.6.2</span>
</a>
</li>
<li>
<a href="https://bootswatch.com/3/" class="dropdown-item d-flex align-items-center justify-content-between">
<span class="ms-2">v3.4.1</span>
</a>
</li>
<li>
<a href="https://bootswatch.com/2/" class="dropdown-item d-flex align-items-center justify-content-between">
<span class="ms-2">v2.3.2</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a href="https://github.com/thomaspark/bootswatch/tags" class="dropdown-item d-flex align-items-center justify-content-between">
<span class="ms-2">All versions</span>
</a>
</li>
</ul>
</li>
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none my-2 text-white-50">
</li>
<li class="nav-item dropdown" data-bs-theme="light">
<a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="theme-menu" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme">
<i class="bi bi-circle-half"></i>
<span class="d-lg-none ms-2">Toggle theme</span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<i class="bi bi-sun-fill"></i><span class="ms-2">Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="true">
<i class="bi bi-moon-stars-fill"></i><span class="ms-2">Dark</span>
</button>
</li>
</ul>
</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&count=true" width="110" height="30"></iframe>
<iframe id="gh-star" src="https://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=star&count=true" width="110" height="30"></iframe>
</span>
</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="bi bi-file-earmark"></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="bi bi-gear-wide"></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="bi bi-wrench"></i></div>
<h4>Tuned for 5.3.7</h4>
<p>Themes are built for the latest version of Bootstrap. <a href="4/">Version 4</a>, <a href="3/">version 3</a>, <a href="2/">version 2</a>, and <a target="_blank" rel="noopener" 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="bi bi-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" href="https://github.com/thomaspark/bootswatch">GitHub</a>.</p>
</div>
<div class="col-lg-4 col-sm-6">
<div class="icon"><i class="bi bi-plug-fill"></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">NodeBB</a> and many more.</p>
</div>
<div class="col-lg-4 col-sm-6">
<div class="icon"><i class="bi bi-send"></i></div>
<h4>Stay Updated</h4>
<p>Be notified about updates by following via <a href="https://blog.bootswatch.com/rss/">RSS feed</a>, <a href="https://twitter.com/bootswatch">Twitter</a>, or <a href="https://blog.bootswatch.com/">blog</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="card preview">
<div class="image">
<a href="brite/">
<img src="brite/thumbnail.png" alt="Brite" width="350" height="210" loading="lazy">
</a>
</div>
<div class="options">
<h3>Brite</h3>
<p>Neobrutalist form</p>
<div class="btn-group"><a class="btn btn-primary" href="brite/">Preview</a></div>
<div class="btn-group">
<a class="btn btn-primary" href="5/brite/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'brite', 'event_label': 'bootstrap.min.css'});" download>Download</a>
<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/brite/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'brite', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/brite/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'brite', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/brite/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'brite', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/brite/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'brite', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/brite/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'brite', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/brite/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'brite', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card preview">
<div class="image">
<a href="cerulean/">
<img src="cerulean/thumbnail.png" 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/cerulean/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/cerulean/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/cerulean/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/cerulean/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/cerulean/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="cosmo/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/cosmo/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/cosmo/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/cosmo/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/cosmo/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/cosmo/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="cyborg/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/cyborg/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/cyborg/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/cyborg/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/cyborg/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/cyborg/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="darkly/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/darkly/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/darkly/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/darkly/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/darkly/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/darkly/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="flatly/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/flatly/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/flatly/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/flatly/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="journal/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/journal/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/journal/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/journal/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/journal/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/journal/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="litera/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/litera/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/litera/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/litera/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/litera/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/litera/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="lumen/">
<img src="lumen/thumbnail.png" 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/lumen/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/lumen/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/lumen/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/lumen/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/lumen/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="lux/">
<img src="lux/thumbnail.png" 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/lux/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/lux/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/lux/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/lux/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/lux/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="materia/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/materia/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/materia/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/materia/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/materia/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/materia/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="minty/">
<img src="minty/thumbnail.png" 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/minty/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/minty/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/minty/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/minty/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/minty/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="morph/">
<img src="morph/thumbnail.png" alt="Morph" width="350" height="210" loading="lazy">
</a>
</div>
<div class="options">
<h3>Morph</h3>
<p>A neumorphic layer</p>
<div class="btn-group"><a class="btn btn-primary" href="morph/">Preview</a></div>
<div class="btn-group">
<a class="btn btn-primary" href="5/morph/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': 'bootstrap.min.css'});" download>Download</a>
<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/morph/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/morph/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/morph/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/morph/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/morph/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/morph/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card preview">
<div class="image">
<a href="pulse/">
<img src="pulse/thumbnail.png" 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/pulse/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/pulse/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/pulse/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/pulse/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/pulse/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="quartz/">
<img src="quartz/thumbnail.png" alt="Quartz" width="350" height="210" loading="lazy">
</a>
</div>
<div class="options">
<h3>Quartz</h3>
<p>A glassmorphic layer</p>
<div class="btn-group"><a class="btn btn-primary" href="quartz/">Preview</a></div>
<div class="btn-group">
<a class="btn btn-primary" href="5/quartz/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': 'bootstrap.min.css'});" download>Download</a>
<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/quartz/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/quartz/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/quartz/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/quartz/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/quartz/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/quartz/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card preview">
<div class="image">
<a href="sandstone/">
<img src="sandstone/thumbnail.png" 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/sandstone/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/sandstone/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/sandstone/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/sandstone/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/sandstone/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="simplex/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/simplex/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/simplex/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/simplex/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/simplex/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/simplex/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="sketchy/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/sketchy/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/sketchy/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/sketchy/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/sketchy/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/sketchy/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="slate/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/slate/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/slate/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/slate/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/slate/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/slate/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="solar/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/solar/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/solar/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/solar/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/solar/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/solar/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="spacelab/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/spacelab/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/spacelab/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/spacelab/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/spacelab/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/spacelab/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="superhero/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/superhero/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/superhero/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/superhero/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/superhero/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/superhero/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="united/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/united/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/united/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/united/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/united/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/united/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/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="card preview">
<div class="image">
<a href="vapor/">
<img src="vapor/thumbnail.png" alt="Vapor" width="350" height="210" loading="lazy">
</a>
</div>
<div class="options">
<h3>Vapor</h3>
<p>A cyberpunk aesthetic</p>
<div class="btn-group"><a class="btn btn-primary" href="vapor/">Preview</a></div>
<div class="btn-group">
<a class="btn btn-primary" href="5/vapor/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': 'bootstrap.min.css'});" download>Download</a>
<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/vapor/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/vapor/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/vapor/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/vapor/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/vapor/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/vapor/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card preview">
<div class="image">
<a href="yeti/">
<img 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="5/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-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/yeti/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/yeti/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/yeti/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/yeti/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/yeti/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/yeti/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card preview">
<div class="image">
<a href="zephyr/">
<img src="zephyr/thumbnail.png" alt="Zephyr" width="350" height="210" loading="lazy">
</a>
</div>
<div class="options">
<h3>Zephyr</h3>
<p>Breezy and beautiful</p>
<div class="btn-group"><a class="btn btn-primary" href="zephyr/">Preview</a></div>
<div class="btn-group">
<a class="btn btn-primary" href="5/zephyr/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': 'bootstrap.min.css'});" download>Download</a>
<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="5/zephyr/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
<a class="dropdown-item" href="5/zephyr/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/zephyr/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
<a class="dropdown-item" href="5/zephyr/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="5/zephyr/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': '_variables.scss'});" download>_variables.scss</a>
<a class="dropdown-item" href="5/zephyr/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'zephyr', '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/392541299" 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="card preview">
<div class="image">
<a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/iIBsVb" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'launch'});">
<img 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/392541299/iIBsVb" 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="card preview">
<div class="image">
<a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/hexdK" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'instance'});">
<img 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/392541299/hexdK" 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="card preview">
<div class="image">
<a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/crzys" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'momentum'});">
<img src="_assets/img/refs/themes.3rdwavemedia.com_momentum.jpg" alt="Momentum" width="350" height="219" loading="lazy">
</a>
</div>
<div class="options">
<h3>Momentum</h3>
<p>A Bootstrap template for tech products</p>
<div>
<a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/crzys" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'momentum'});">View Details</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card preview">
<div class="image">
<a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/XPCxW" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'coderpro'});">
<img 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/XPCxW" 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="card preview">
<div class="image">
<a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/nJtGd" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'novapro'});">
<img 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/392541299/nJtGd" 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="card preview">
<div class="image">
<a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/fYvEc" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'devcard'});">
<img 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/392541299/fYvEc" 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="card 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&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1118907442" rel="noopener nofollow" target="_blank">
<img 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 &amp; 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&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;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="card 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&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1593279507" rel="noopener nofollow" target="_blank">
<img 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&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;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="card 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&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1449372635" rel="noopener nofollow" target="_blank">
<img 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&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;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="card preview">
<div class="image">
<a href="https://codepip.com/games/flexbox-froggy/" rel="noopener" target="_blank">
<img 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="card preview">
<div class="image">
<a href="https://codepip.com/games/grid-garden/" rel="noopener" target="_blank">
<img 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="card preview">
<div class="image">
<a href="https://codepip.com/games/code-crunchers/" rel="noopener" target="_blank">
<img 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://icons.getbootstrap.com/" rel="nofollow">Bootstrap Icons</a>. Web fonts from <a href="https://fonts.google.com/" rel="nofollow">Google</a>.</p>
</div>
</div>
</footer>
</div>
<script src="./_vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="./_assets/js/custom.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink