Bootstrap 4 select option to add image thumbnail not working

Question

Bootstrap 4 select option to added image thumbnail not working, any solution for this?

Thanks

 <select class="form-control" id="exampleFormControlSelect1">
          <option><img src="/assets/images/platform/abs.png">ABS-01</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>

May this can help you. - https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list — Prakash Rajotiya, Oct 15 '19 at 10:14
Hi - @core114 pls link check me solution https://github.com/piyushteraiya/Dropdown — Piyush Teraiya, Oct 15 '19 at 10:42

score 4 · Accepted Answer · edited Mar 03 '23 at 00:25

4

You cannot add icons or images in select. But a plugin called bootstrap-select can help you.

The icons used for this plugin are directly loaded from the Glyphicons provided by bootstrap.

The Git Project can be found here: https://github.com/snapappointments/bootstrap-select

You can also find a live demo of the functionality in here: http://silviomoreto.github.io/bootstrap-select

edited Mar 03 '23 at 00:25

jox

2,218
22
32

answered Oct 15 '19 at 10:15

Kevin

1,241
7
20

score 0 · Answer 2 · answered Oct 20 '20 at 15:51

Try using this

<select title="" class="selectpicker">
    <option>Select...</option>
    <option data-content="<img class='email' src='https://thdoan.github.io/bootstrap-select/images/icon-chrome.png'><span class='text-dark'>Air India Express</span>"> Chrome</option>
    <option data-content="<img class='email' src='https://thdoan.github.io/bootstrap-select/images/icon-firefox.png'><span class='text-dark'>Air India Express</span>"> Firefox</option>
    <option data-content="<img class='email' src='https://thdoan.github.io/bootstrap-select/images/icon-ie.png'><span class='text-dark'>Air India Express</span>"> IE</option>
    <option data-content="<img class='email' src='https://thdoan.github.io/bootstrap-select/images/icon-safari.png'><span class='text-dark'>Air India Express</span>"> Safari </option>
</select>

Bootstrap 4 select option to add image thumbnail not working

2 Answers2