Spacing system
200px - $spacer * 12.5 - 13
160px - $spacer * 10 - 12
120px - $spacer * 7.5 - 11
80px - $spacer * 5 - 10
72px - $spacer * 4.5 - 9
64px - $spacer * 4 - 8
48px - $spacer * 3 - 7
40px - $spacer * 2.5 - 6
32px - $spacer * 2 - 5
24px - $spacer * 1.5 - 4
16px - $spacer - 3
12px - $spacer * 0.75 - standard
8px - $spacer * 0.5 - 2
4px - $spacer * 0.25 - 1
0px - $spacer * 0 - 0
Headings
heading-3xl
heading-xxl, h1
heading-xl, h2
heading-lg, h3
heading-md, h4
heading-sm, h5
heading-xs, h6
heading-xxs
heading-3xs
heading-4xs
heading-5xs
heading-6xs
Texts
body-xl
body-lg
body-md
body-sm
body-xs
Colors
text-white
text-primary-900
text-primary-800
text-primary-700
text-primary-600
text-primary
text-primary-400
text-primary-300
text-primary-200
text-primary-100
text-info-900
text-info-800
text-info-700
text-info-600
text-info
text-info-400
text-info-300
text-info-200
text-info-100
text-warning-900
text-warning-800
text-warning-700
text-warning-600
text-warning
text-warning-400
text-warning-300
text-warning-200
text-warning-100
text-error-900
text-error-800
text-error-700
text-error-600
text-error
text-error-400
text-error-300
text-error-200
text-error-100
text-default
text-grey-20
text-grey-30
text-grey-40
text-grey
text-grey-60
text-grey-70
text-grey-80
text-grey-90
text-grey-95
Backgrounds
bg-white
bg-primary-900
bg-primary-800
bg-primary-700
bg-primary-600
bg-primary
bg-primary-400
bg-primary-300
bg-primary-200
bg-primary-100
bg-info-900
bg-info-800
bg-info-700
bg-info-600
bg-info
bg-info-400
bg-info-300
bg-info-200
bg-info-100
bg-warning-900
bg-warning-800
bg-warning-700
bg-warning-600
bg-warning
bg-warning-400
bg-warning-300
bg-warning-200
bg-warning-100
bg-error-900
bg-error-800
bg-error-700
bg-error-600
bg-error
bg-error-400
bg-error-300
bg-error-200
bg-error-100
bg-default
bg-grey-20
bg-grey-30
bg-grey-40
bg-grey
bg-grey-60
bg-grey-70
bg-grey-80
bg-grey-90
bg-grey-95
Buttons
| Primary | Secondary Light | Tertiary Light | Secondary Dark | Tertiary Dark | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| no icon | with icon | no icon | with icon | no icon | with icon | no icon | with icon | no icon | with icon | ||
| default | default | ||||||||||
| hover | |||||||||||
| active | |||||||||||
| disabled | |||||||||||
| Classes | btn btn-primary | btn btn-primary btn--icon | btn btn-secondary | btn btn-secondary btn--icon | btn btn-tertiary | btn btn-tertiary btn--icon | btn btn-secondary-dark | btn btn-secondary-dark btn--icon | btn btn-tertiary-dark | btn btn-tertiary-dark btn--icon | |
| small | default | ||||||||||
| hover | |||||||||||
| active | |||||||||||
| disabled | |||||||||||
| Classes | btn btn-primary btn-sm | btn btn-primary btn-sm btn--icon | btn btn-secondary btn-sm | btn btn-secondary btn-sm btn--icon | btn btn-tertiary btn-sm | btn btn-tertiary btn-sm btn--icon | btn btn-secondary-dark btn-sm | btn btn-secondary-dark btn-sm btn--icon | btn btn-tertiary-dark btn-sm | btn btn-tertiary-dark btn-sm btn--icon | |
| large | default | ||||||||||
| hover | |||||||||||
| active | |||||||||||
| disabled | |||||||||||
| Classes | btn btn-primary btn-lg | btn btn-primary btn-lg btn--icon | btn btn-secondary btn-lg | btn btn-secondary btn-lg btn--icon | btn btn-tertiary btn-lg | btn btn-tertiary btn-lg btn--icon | btn btn-secondary-dark btn-lg | btn btn-secondary-dark btn-lg btn--icon | btn btn-tertiary-dark btn-lg | btn btn-tertiary-dark btn-lg btn--icon | |
Textlinks
| no icon | with icon (left) | with icon (right) | ||
|---|---|---|---|---|
| default | textlink | textlink | textlink | |
| hover | textlink | textlink | textlink | |
| active | textlink | textlink | textlink | |
| Classes | textlink wenn a-Tag, wird Class nicht zwingend benötigt | textlink textlink--icon-left | textlink textlink--icon-right |
Navigation
Animationen
| Name | Preview | Classes | Code |
|---|---|---|---|
| Hamburger Middle |
|
navbar-toggler__icon navbar-toggler--hamburger-middle
navbar-toggler__icon navbar-toggler--hamburger-middle navbar-toggler--rounded
|
|
Ratios
Referenz: Bootstrap 5.2 Ratiosratio-1x1
ratio-2x1
ratio-3x2
ratio-4x3
ratio-2x3
ratio-3x4
ratio-1x2
ratio-9x16
ratio-9x21
ratio-16x9
ratio-21x9
Inputs
Ihr Passwort muss 8-20 Zeichen lang sein, Buchstaben und Zahlen enthalten und darf keine Leerzeichen, Sonderzeichen oder Emoji enthalten.
Dieses Feld ist erforderlich.
Ihr Passwort muss 8-20 Zeichen lang sein, Buchstaben und Zahlen enthalten und darf keine Leerzeichen, Sonderzeichen oder Emoji enthalten.
Dieses Feld ist erforderlich.
Ihr Passwort muss 8-20 Zeichen lang sein, Buchstaben und Zahlen enthalten und darf keine Leerzeichen, Sonderzeichen oder Emoji enthalten.
Dieses Feld ist erforderlich.
Ihr Passwort muss 8-20 Zeichen lang sein, Buchstaben und Zahlen enthalten und darf keine Leerzeichen, Sonderzeichen oder Emoji enthalten.
Dieses Feld ist erforderlich.
Badges
Single-choice
Badge .is-active BadgeMulti-choice
Badge
.is-active
.is-active
.is-active
Badge
.is-active
Icons
Google Material Icons
Alle Icons und Codes hier einzusehen: Material Icons
| Icon | Einbindung über Class | Einbindung über Code |
|---|---|---|
<span class="material-icons-outlined">close</span>
|
::before {
|
|
<span class="material-icons-outlined">expand_more</span>
|
::before {
|
|
<span class="material-icons-outlined">expand_less</span>
|
::before {
|
|
<span class="material-icons-outlined">chevron_right</span>
|
::before {
|
|
<span class="material-icons-outlined">chevron_left</span>
|
::before {
|
|
<span class="material-icons-outlined">arrow_drop_down</span>
|
::before {
|
|
<span class="material-icons-outlined">arrow_drop_up</span>
|
::before {
|
|
<span class="material-icons-outlined">arrow_left</span>
|
::before {
|
|
<span class="material-icons-outlined">arrow_right</span>
|
::before {
|
|
<span class="material-icons-outlined">add</span>
|
::before {
|
|
<span class="material-icons-outlined">home</span>
|
::before {
|
|
<span class="material-icons-outlined">search</span>
|
::before {
|
|
<span class="material-icons-outlined">key</span>
|
::before {
|
|
<span class="material-icons-outlined">check</span>
|
::before {
|
|
<span class="material-icons-outlined">check_circle</span>
|
::before {
|
|
<span class="material-icons-outlined">info</span>
|
::before {
|
nova Material
<span class="nm nm-download"></span>
<span class="nm nm-facebook"></span>
<span class="nm nm-instagram"></span>
<span class="nm nm-linkedin"></span>
<span class="nm nm-pinterest"></span>
<span class="nm nm-quote"></span>
<span class="nm nm-tiktok"></span>
<span class="nm nm-twitter"></span>
<span class="nm nm-whatsapp"></span>
<span class="nm nm-xing"></span>
<span class="nm nm-youtube"></span>
Alerts
Alert ohne Schließen-Button
<div class="alert alert-success" role="alert">
Text text text
</div>
Alert mit Schließen-Button
<div class="alert alert-success alert-dismissible fade show" role="alert">
Text text text
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" tabindex="0"></button>
</div>
A simple success alert—check it out! - alert alert-success
A simple success alert—check it out! - alert alert-success
A simple success alert—check it out! - alert alert-success
Alert mit Icon
<div class="alert alert-success d-flex align-items-center" role="alert">
<span class="material-icons-outlined me-2">check_circle</span>
Text text text
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" tabindex="0"></button>
</div>
Alert mit Weiten-Einstellung
<div class="alert alert-info alert-dismissible w-75" role="alert">
Text text text
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Cards
Referenz: Bootstrap 5.2 CardsCard subtitle Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Progress bar
<div class="progress">
⠀ <div class="progress-bar rounded-end-2xl" role="progressbar" aria-label="label"
⠀ style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress">
⠀ <div class="progress-bar rounded-end-2xl" role="progressbar" aria-label="label"
⠀ style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
Tooltips
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Tooltip on top</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
Tooltip on bottom</button>
Popovers
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And heres some amazing content. Its very engaging. Right?">Click to toggle popover</button>
Checks-Radios
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>