Bootstrap5-Badges
Badges werden hauptsächlich verwendet, um neue oder ungelesene Elemente hervorzuheben. Um Badges zu verwenden, fügen Sie einfach die.badgeKlasse plus eine Farbklasse mit einer bestimmten Bedeutung (z.B..bg-secondary) zum<span>Element. Badges können sich abhängig von der Größe des übergeordneten Elements ändern:
Beispiele
<h1>Testüberschrift<span class="badge bg-secondary">Neu</span></h1>
<h2>Testüberschrift<span class="badge bg-secondary">Neu</span></h2>
<h3>Testüberschrift<span class="badge bg-secondary">Neu</span></h3>
<h4>Testüberschrift<span class="badge bg-secondary">Neu</span></h4>
<h5>Testüberschrift<span class="badge bg-secondary">Neu</span></h5>
<h6>Testüberschrift<span class="badge bg-secondary">Neu</span></h6>
Selbst ausprobieren »
Verschiedene Farbtypen von Badges
Im Folgenden werden alle Arten von Badge-Farben aufgelistet:
Beispiele
<span class="badge bg-primary">Primär</span>
<span class="badge bg-secondary">Sekundär</span>
<span class="badge bg-success">Erfolg</span>
<span class="badge bg-danger">Gefahr</span>
<span class="badge bg-warning">Warnung</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Hell</span>
<span class="badge bg-dark">Dunkel</span>
Selbst ausprobieren »
Pill-Badges
Verwenden Sie die.rounded-pillKlasse, um pillenförmige Badges zu setzen:
Beispiele
<span class="badge rounded-pill bg-primary">Primär</span>
<span class="badge rounded-pill bg-success">Erfolg</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-warning">Warnung</span>
<span class="badge rounded-pill bg-danger">Gefahr</span>
Selbst ausprobieren »
Badges innerhalb von Elementen
Das folgende Beispiel bettet Badges in Buttons ein:
Beispiele
<button type="button" class="btn btn-primary">
Nachrichten <span class="badge bg-light">4</span>
</button>
Selbst ausprobieren »