Archives widget dropdown to be styled like Bootstrap dropdown - wordpress

Question

In WordPress, there is default Archives widget that displays a form select with the list of monthly archives and on change executes:
document.location.href=this.options[this.selectedIndex].value;
I need the same functionality but styled like a Bootstrap dropbdown
<div class="btn-group dropdown">
<button class="btn btn-link">Dropdown Button</button>
<button class="btn dropdown-toggle btn-large" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
How can I achieve this?
Is there any class that I could add to the select, so that I get the Bootstrap dropdown style along with the same functionality?

Answer 1

There's no way of modifying the output for that widget. You have to copy the whole WP_Widgets_Archives and create your own widget.
See the Widgets_API and this old, but still valid article: The complete guide to creating widgets in WordPress 2.8.
You'll have to place your code in this block:
if ( $d ) {
?>
<div class="btn-group dropdown">
<button class="btn btn-link">Dropdown Button</button>
<button class="btn dropdown-toggle btn-large" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<?php wp_get_archives( array('type' => 'monthly', 'format' => 'html', 'show_post_count' => $c)); ?>
</ul>
</div>
<?php
}
Note the format html for wp_get_archives, this produces a <li> list.

Answer 2

If you are using SASS
#import "~bootstrap/scss/bootstrap";
.widget_archive select {
#extend .form-control;
}