I already have a dropdown
with the following code:
note: class='bg_r'
is in CSS 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 for above code is as shown in figure 1 below:
Now, I'm doing similar to that(above figure) using bootstrap 4
.But i'm not able to override the button style using background image.Instead of button type I replaced with anchor tag
but of no use(its wrong method but i tried). Following is the code I 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 for the code using bootstrap is as shown in figure 2 below:
How can I override button type with (background) image to get output similar to figure 1?
Thanks in advance.