I have a dropdown already set up with the code below:
Note: The CSS class 'bg_r' is used for the background image (url) globe
<span class="bg_r">
Language: <a id="Lang" href="#">DropUp▲</a>
</span>
<div id="language_menu" class="lang_switch_panel">
<div class="lang_switch">
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
</ul>
</div>
</div>
The output of the above code is displayed in figure 1 below:
https://i.sstatic.net/PWMyK.png
Now, I'm trying to achieve something similar to the above using bootstrap 4. However, I am struggling to override the button style using a background image. I tried replacing the button type with an anchor tag, but it did not work.
Here is the code I have tried so far:
<span class="bg_r">
Language:
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<!--<span class="bg_r">Language:
<a type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</a>
</span>-->
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
The output of the code using bootstrap is shown in figure 2 below:
https://i.sstatic.net/9vo8n.png
Any suggestions on how I can override the button type with a background image to achieve a similar output to figure 1?
Thank you in advance.