CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
raduken
raduken

Reputation: 2119

Pill badges for Bootstrap v3.3.7

Is there a way to apply Pill badges for Bootstrap v3.3.7?

Similar to what we have on Bootstrap 4 with the class .badge-pill.

https://v4-alpha.getbootstrap.com/components/badge/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div>
<span class="label label-primary">close x </span>
</div>

Upvotes: 1

Views: 4795

Answers (2)

RVCoder
RVCoder

Reputation: 542

you can make a new css class :

.label-primary{
   border-radius: 1em;
   padding: 1em;
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106008

You can recreate a similar class increasing border-radius if such a class is not avalaible in bootstrap

.label.badge-pill {
border-radius:1em;
margin:0 0.25em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div>

<span class="label label-default badge-pill">default </span>

<span class="label label-primary badge-pill">primary </span>

<span class="label label-success badge-pill">success</span>

<span class="label label-info badge-pill">info </span>

<span class="label label-warning badge-pill">warning </span>

<span class="label label-danger badge-pill">danger </span>
</div>

Upvotes: 5

Related Questions