Author Topic: How to add image to HTML and Bootstrap Select Option Dropdown  (Read 75 times)

christogonus

  • Newbie
  • *
  • Posts: 7
    • View Profile
Hi there,

If you a

The ability to add or to style the select option element is limited generally, both in HTML and Bootstrap too. But there are awesome 3rd party jquery plugins that helps to make this easy for developers like me  :)

My favorite plugin for this action is https://github.com/snapappointments/bootstrap-select

It is provided by an awesome team who support it, and most interestingly, it is absolutely free to use!

So, here's how I go about it...

First, I add the CSS and Javascript files to the project page. I prefer to use the CDN version. As at when I am writing this post, the latest version links are as found below:

Code: [Select]
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/js/bootstrap-select.min.js"></script>

But you can always get the link to the latest version on Github page here https://github.com/snapappointments/bootstrap-select

The next thing is to add the class "selectpicker" to the specific list I wish to customise, as below.

Code: [Select]
<select name="whatever" class="selectpicker">
  <option>Mustard</option>
</select>

And finally, I add the custom style I want in the project. Normally, I use this for images, but you can do a lot more with it.
Here is a code to my complete usage in select option on a project with bootstrap theme.

Code: [Select]
<select class="form-control selectpicker" name="country">
<option>Select...</option>
<option value="United States" data-content="<img src='us.png' />"> United States </option>
</select>

The "<img src='us.png' />" will reflect the correct path to my image.

Hope this helps you.


Tags:
  • bootstrap 4 styled select
  • bootstrap 4 select option with image
  • HTML styled select
  • HTML select option with image