Da Bootstrap 5 bereits sehr sehr viele Elemente und Komponenten enthält, sind hier nur die wichtigsten aufgelistet. Trotzdem sind natürlich alle Komponenten in unseren Themes enthalten!

# 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

Fancy display heading With faded secondary text 

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

# alerts

<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

<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 success box with an example link. 
.box .box-success .box-icon-check
A simple danger box with an example link. 
.box .box-danger
A simple danger box with an example link. 
.box .box-danger .box-icon-danger
A simple warning box with an example link. 
.box .box-warning
A simple warning box with an example link. 
.box .box-warning .box-icon-warning
A simple info box with an example link. 
.box .box-info
A simple info box with an example link. 
.box .box-info .box-icon-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

<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.
  1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  2. At vero eos et accusam et justo duo dolores et ea rebum.
  3. 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>