CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Shailesh Pratapwar
Shailesh Pratapwar

Reputation: 4224

Bootstrap 3 : Increase size of badge

As per bootstrap 4, if you use heading tag to surround the spans, the badge adjust the size as per the heading as mentioned in documentation.

<h1>Example heading <span class="badge badge-secondary">New</span></h1>

https://getbootstrap.com/docs/4.4/components/badge/

enter image description here

However, I have bootstrap 3 and it seems it doesn't support this behaviour. Is there any way in bootstrap 3 to increase size of badge ?

Upvotes: 1

Views: 1413

Answers (2)

davidkonrad
davidkonrad

Reputation: 85558

No need for dirty custom CSS. Look at .label. The BS3 equivalent to the BS4 

<h1>Example heading <span class="badge badge-secondary">New</span></h1>

and so on is 

<h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2>
<h3>Example heading <span class="label label-default">New</span></h3>
<h4>Example heading <span class="label label-default">New</span></h4>
<h5>Example heading <span class="label label-default">New</span></h5>

demo -> http://jsfiddle.net/5sL7ny2w/

Upvotes: 2

Mohsin Yaqoob
Mohsin Yaqoob

Reputation: 66

.badge-parent>span{
  font-size:3rem;
}
<h1 class="badge-parent">
  <span class="badge badge-primary">Span</span>
</h1>

Upvotes: 1

Related Questions