Bootstrap Badge Inside Select Option

Asked Nov 23 '20 at 08:38

Active Nov 23 '20 at 08:44

Viewed 3,529 times

I have following drop-down :

<select class="form-control">
  <option value=1>Pooja Parikh</option>
  <option value=2>Poorti Parikh</option>
  <option value=3>Agent 2</option>
  <option value=6>AWS Bot AWS Bot</option>
</select>

I want the above dropdown with a bootstrap badge, like following

<select class="form-control">
  <option value=1>Pooja Parikh</option>
  <option value=2>Poorti Parikh</option>
  <option value=3>Agent 2</option>
  <option value=6>AWS Bot AWS Bot <span class='badge badge-info'>Bot</span> </option>
</select>

when I tried the above code, its giving simple dropdown options with text only (not giving badge)

I was wondering if anyone one helps me out to implement the above.

Thanks

edited Nov 23 '20 at 08:44

asked Nov 23 '20 at 08:38

Pooja K Bhatt

Well, you can't do this. You should create a custom select box instead. Maybe [this](https://stackoverflow.com/questions/3354979/styling-part-of-the-option-text) could help. – SMAKSS Nov 23 '20 at 08:45
Did you added bootstrap CSS library? – mhhabib Nov 23 '20 at 08:46
@MH Habib yes already added – Pooja K Bhatt Nov 23 '20 at 09:06
1

Can you allow dropdown instead of select? – mhhabib Nov 23 '20 at 09:24
can you give me an example? – Pooja K Bhatt Nov 23 '20 at 09:56

Bootstrap Badge Inside Select Option

0 Answers0