I have the following code to add badges:

@foreach (var item in items)
{
    <span class="badge badge-secondary badge-larger">@item.Name</span>
}

And the following css:

.badge.badge-larger {
    padding-right: 5px;
    font-size: 0.9em;
}

The size is being applied. However I can't seem to add padding to the right.

What is the correct way to add padding to badges?

I have the following code to add badges:

@foreach (var item in items)
{
    <span class="badge badge-secondary badge-larger">@item.Name</span>
}

And the following css:

.badge.badge-larger {
    padding-right: 5px;
    font-size: 0.9em;
}

The size is being applied. However I can't seem to add padding to the right.

What is the correct way to add padding to badges?

• css
• bootstrap-4
• blazor

• Have you tried using !important for your padding-right style? It is used to give a specific property higher priority over other rules that might be affecting the same property. So padding-right: 5px !important;. – Richard Commented Mar 12 at 17:38
• Yes I did add it and it does not work. – Ivan Debono Commented Mar 13 at 5:49
• Could you clarify why you need to add padding to the 'badge'? Is it to create spacing between the badge and the main element (e.g., text), or is it intended to adjust the badge's size? – Olga S Commented Mar 17 at 7:51

1 Answer 1

@foreach (var item in items)
{
    <span class="badge text-bg-secondary badge-larger">@item.Name</span>
}

//default bootstrap padding

.badge{
   padding:0.35em 0.65em; 
   font-size: 0.75em;
      }

//as you need customize styles like padding, size etc..

.badge.badge-larger{
    padding:0.5em 1em;  
    font-size: 1em;
  }