CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
stevec
stevec

Reputation: 52458

Change the size of a bootstrap pill badge?

I can get a pill badge using this method (found here & jsfiddle here):

<span class="badge badge-pill badge-primary" style="float:right;margin-bottom:-10px;">&nbsp;</span>

enter image description here

How can I decrease the size of the dot? (note, I tried wrapping the <span> in <p> but that messed up formatting and didn't change the size of the dot)

Upvotes: 1

Views: 5779

Answers (2)

Evangelos Bitsilis
Evangelos Bitsilis

Reputation: 895

According to the documentation:

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

So if u change the font size of the parent element or the font size of the span itself, your badge size will change too

Here is an exaple

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<h1>
  <span class="badge badge-pill badge-primary">&nbsp;</span>
</h1>

<h2>
<span class="badge badge-pill badge-primary">&nbsp;</span>
</h2>

<h3>
  <span class="badge badge-pill badge-primary">&nbsp;</span>
</h3>

<span class="badge badge-pill badge-primary" style="font-size: 5px;">
  &nbsp;
</span>

<span class="badge badge-pill badge-primary" style="font-size: 10px;">
  &nbsp;
</span>

<span class="badge badge-pill badge-primary" style="font-size: 15px;">
  &nbsp;
</span>

<span class="badge badge-pill badge-primary" style="font-size: 20px;">
  &nbsp;
</span>

Upvotes: 5

kiranvj
kiranvj

Reputation: 34127

From the question what I feel is you need something like this. No need of any custom classes, if you need more customization use the second example

enter image description here

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


Inbox<sup><span class="badge badge-pill badge-primary">10</span></sup>

It should be possible by overriding the class. You can also do this by editing the bootstrap sass files. Check this if it works for you.

.badge.badge-pill.badge-primary.pill-small {
  padding:2px;
  font-size:.5rem;
}

.badge.badge-pill.badge-primary.pill-medium {
  padding:7px;
  font-size:.75rem;
}

.badge.badge-pill.badge-primary.pill-large {
  padding:7px;
  font-size:1.5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<span class="badge badge-pill badge-primary pill-small">2</span>

<span class="badge badge-pill badge-primary pill-medium">100</span>

<span class="badge badge-pill badge-primary pill-large">19</span>

Upvotes: 1

Related Questions