# theme-colors
$primary
$secondary
Color Palette
1
2
3
4
5
6
Bootstrap Colors
primary
secondary
success
info
warning
danger
<div class="container-fluid px-0 mb-3">
<div class="row gx-2 text-center">
<div class="col">
<div class="p-3 border bg-primary text-white">$primary</div>
</div>
<div class="col">
<div class="p-3 border bg-secondary text-white">$secondary</div>
</div>
</div>
</div>
<p class="text-center pb-0 text-muted">Color Palette</p>
<div class="container-fluid px-0 mb-4">
<div class="row gx-2 text-center">
<div class="col">
<div class="p-3 border bg-theme1 text-white">1</div>
</div>
<div class="col">
<div class="p-3 border bg-theme2 text-white">2</div>
</div>
<div class="col">
<div class="p-3 border bg-theme3 text-white">3</div>
</div>
<div class="col">
<div class="p-3 border bg-theme4 text-white">4</div>
</div>
<div class="col">
<div class="p-3 border bg-theme5 text-white">5</div>
</div>
<div class="col">
<div class="p-3 border bg-theme6 text-white">6</div>
</div>
</div>
</div>
<p class="text-center pb-0 text-muted">Bootstrap Colors</p>
<div class="container-fluid px-0">
<div class="row g-2 text-center">
<div class="col">
<div class="p-2 border bg-primary text-white">primary</div>
</div>
<div class="col">
<div class="p-2 border bg-secondary text-white">secondary</div>
</div>
<div class="col">
<div class="p-2 border bg-success text-white">success</div>
</div>
<div class="col">
<div class="p-2 border bg-info text-white">info</div>
</div>
<div class="col">
<div class="p-2 border bg-warning text-white">warning</div>
</div>
<div class="col">
<div class="p-2 border bg-danger text-white">danger</div>
</div>
</div>
</div>
# headings
h1 Bootstrap heading
h2 Bootstrap heading
h3 Bootstrap heading
h4 Bootstrap heading
h5 Bootstrap heading
h6 Bootstrap heading
<h1>h1 Bootstrap heading</h1>
<h2>h2 Bootstrap heading</h2>
<h3>h3 Bootstrap heading</h3>
<h4>h4 Bootstrap heading</h4>
<h5>h5 Bootstrap heading</h5>
<h6>h6 Bootstrap heading</h6>
# heading-mixed
# alerts
A simple primary alert with an example link.
.alert .alert-primary
A simple secondary alert with an example link.
.alert .alert-secondary
A simple success alert with an example link.
.alert .alert-success
A simple danger alert with an example link.
.alert .alert-danger
A simple warning alert with an example link.
.alert .alert-warning
A simple info alert with an example link.
.alert .alert-info
A simple light alert with an example link.
.alert .alert-light
A simple dark alert with an example link.
.alert .alert-dark
<div class="row masonry-container" data-masonry='{"percentPosition": true }'>
<div class="col-6 masonry-item">
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. <pre>.alert .alert-primary</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. <pre>.alert .alert-secondary</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. <pre>.alert .alert-success</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-success alert-icon-check" role="alert">
A simple success alert with a check icon. <pre>.alert .alert-success .alert-icon-check</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. <pre>.alert .alert-danger</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-danger alert-icon-warning" role="alert">
A simple danger alert with a warning icon. <pre>.alert .alert-danger .alert-icon-warning</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. <pre>.alert .alert-warning</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-warning alert-icon-warning" role="alert">
A simple warning alert with a warning icon. <pre>.alert .alert-warning .alert-icon-warning</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. <pre>.alert .alert-info</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-info alert-icon-info" role="alert">
A simple info alert with an info icon. <pre>.alert .alert-info .alert-icon-info</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. <pre>.alert .alert-light</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. <pre>.alert .alert-dark</pre>
</div>
</div>
</div>
# alerts-additional-content
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
# box
A simple primary box with an example link.
.box .box-primary
A simple secondary box with an example link.
.box .box-secondary
A simple success box with an example link.
.box .box-success
A simple danger box with an example link.
.box .box-danger
A simple warning box with an example link.
.box .box-warning
A simple info box with an example link.
.box .box-info
A simple light box with an example link.
.box .box-light
A simple dark box with an example link.
.box .box-dark
<div class="row masonry-container" data-masonry='{"percentPosition": true }'>
<div class="col-6 masonry-item">
<div class="box box-primary" role="box">
A simple primary box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-primary</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-secondary" role="box">
A simple secondary box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-secondary</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-success" role="box">
A simple success box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-success</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-success box-icon-check" role="box">
A simple success box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-success .box-icon-check</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-danger" role="box">
A simple danger box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-danger</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-danger box-icon-danger" role="box">
A simple danger box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-danger .box-icon-danger</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-warning" role="box">
A simple warning box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-warning</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-warning box-icon-warning" role="box">
A simple warning box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-warning .box-icon-warning</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-info" role="box">
A simple info box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-info</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-info box-icon-info" role="box">
A simple info box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-info .box-icon-info</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-light" role="box">
A simple light box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-light</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="box box-dark" role="box">
A simple dark box with <a href="#" class="box-link">an example link</a>. <pre>.box .box-dark</pre>
</div>
</div>
</div>
# cards
A simple primary card with
.card .bg-primary .text-light
A simple secondary card with
.card .bg-secondary .text-light
A simple success card with
.card .bg-success .text-light
A simple danger card with
.card .bg-danger .text-light
A simple warning card with
.card .bg-warning .text-light
A simple info card with
.card .bg-info
A simple light card with
.card .bg-light
A simple dark card with
.card .bg-dark .text-ligh
<div class="row masonry-container" data-masonry='{"percentPosition": true }'>
<div class="col-6 masonry-item">
<div class="card bg-primary text-light p-3 my-3" role="alert">
A simple primary card with <pre>.card .bg-primary .text-light</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="card bg-secondary text-light p-3 my-3" role="alert">
A simple secondary card with <pre>.card .bg-secondary .text-light</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="card bg-success text-light p-3 my-3" role="alert">
A simple success card with <pre>.card .bg-success .text-light</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="card bg-danger text-light p-3 my-3" role="alert">
A simple danger card with <pre>.card .bg-danger .text-light</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="card bg-warning text-light p-3 my-3" role="alert">
A simple warning card with <pre>.card .bg-warning .text-light</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="card bg-info p-3 my-3" role="alert">
A simple info card with <pre>.card .bg-info</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="card bg-light text-dark p-3 my-3" role="alert">
A simple light card with <pre>.card .bg-light</pre>
</div>
</div>
<div class="col-6 masonry-item">
<div class="card bg-dark text-light p-3 my-3" role="alert">
A simple dark card with <pre>.card .bg-dark .text-ligh</pre>
</div>
</div>
</div>
# buttons
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
# buttons-outline
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
# tables
Basic Table .table
# | Theme | Author |
---|---|---|
1 | wedoitwithstyle | wdiws |
2 | tinted | wdiws |
1 | blacklight | wdiws |
Striped Table .table .table-striped
# | Theme | Author |
---|---|---|
1 | wedoitwithstyle | wdiws |
2 | tinted | wdiws |
1 | blacklight | wdiws |
Hoverable Table .table .table-hover
# | Theme | Author |
---|---|---|
1 | wedoitwithstyle | wdiws |
2 | tinted | wdiws |
1 | blacklight | wdiws |
<p>Basic Table <code>.table</code></p>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Theme</th>
<th scope="col">Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>wedoitwithstyle</td>
<td>wdiws</td>
</tr>
<tr>
<td>2</td>
<td>tinted</td>
<td>wdiws</td>
</tr>
<tr>
<td>1</td>
<td>blacklight</td>
<td>wdiws</td>
</tr>
</tbody>
</table>
<p>Striped Table <code>.table .table-striped</code></p>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Theme</th>
<th scope="col">Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>wedoitwithstyle</td>
<td>wdiws</td>
</tr>
<tr>
<td>2</td>
<td>tinted</td>
<td>wdiws</td>
</tr>
<tr>
<td>1</td>
<td>blacklight</td>
<td>wdiws</td>
</tr>
</tbody>
</table>
<p>Hoverable Table <code>.table .table-hover</code></p>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Theme</th>
<th scope="col">Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>wedoitwithstyle</td>
<td>wdiws</td>
</tr>
<tr>
<td>2</td>
<td>tinted</td>
<td>wdiws</td>
</tr>
<tr>
<td>1</td>
<td>blacklight</td>
<td>wdiws</td>
</tr>
</tbody>
</table>
# lists
Basic lists
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- At vero eos et accusam et justo duo dolores et ea rebum.
- Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- At vero eos et accusam et justo duo dolores et ea rebum.
- Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Icons for lists
- Features
ul.styled and li.star
- For Todos
li.todo
- For Todos
li.todo-checked
- For checked lists
li.checked
- For a Circle List use
ul.circle
<h3>Basic lists</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
<li>At vero eos et accusam et justo duo dolores et ea rebum.</li>
<li>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
<li>At vero eos et accusam et justo duo dolores et ea rebum.</li>
<li>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
</ol>
<h3>Icons for lists</h3>
<ul class="styled">
<li class="star">Features <code>ul.styled and li.star</code></li>
<li class="todo">For Todos <code>li.todo</code></li>
<li class="todo-checked">For Todos <code>li.todo-checked</code></li>
<li class="check">For checked lists <code>li.checked</code></li>
</ul>
<ul class="circle">
<li>For a Circle List use <code>ul.circle</code></li>
</ul>