diff --git a/src/BootstrapBlazor/Components/Badge/Badge.razor.cs b/src/BootstrapBlazor/Components/Badge/Badge.razor.cs
index 606a5ddda79..e37d63a76da 100644
--- a/src/BootstrapBlazor/Components/Badge/Badge.razor.cs
+++ b/src/BootstrapBlazor/Components/Badge/Badge.razor.cs
@@ -11,7 +11,7 @@ namespace BootstrapBlazor.Components;
 public partial class Badge
 {
     private string? ClassString => CssBuilder.Default("badge")
-        .AddClass($"bg-{Color.ToDescriptionString()}", Color != Color.None)
+        .AddClass($"text-bg-{Color.ToDescriptionString()}", Color != Color.None)
         .AddClass("rounded-pill", IsPill)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
diff --git a/src/BootstrapBlazor/Components/Badge/Badge.razor.scss b/src/BootstrapBlazor/Components/Badge/Badge.razor.scss
index a08d47f0e04..d18937eb302 100644
--- a/src/BootstrapBlazor/Components/Badge/Badge.razor.scss
+++ b/src/BootstrapBlazor/Components/Badge/Badge.razor.scss
@@ -1,5 +1,5 @@
-.badge {
-    &.bg-secondary, &.bg-light {
+.badge {
+    &.text-bg-secondary, &.text-bg-light {
         --bs-badge-color: #{$bb-badge-color};
     }
 }