After recently migrating from Bootstrap 4 to Bootstrap 5.3 I needed to have a way to make sure my sidebar widgets in WordPress had the same look and feel as my other Bootstrap 5.3 elements. After reviewing what I initially wrote about this in 2016 – I realized the solution is very similar to what I did for Bootstrap 4.

The end goal: Full widget dropdown with the arrow to the far right as seen in the screenshot below.

The solution is twofold:

1. For the category widget we have the option to add in a class using a function in your theme’s functions.php file
2. For all other dropdowns (archives, etc) you can simply add in some style into your theme’s stylesheet to make sure the select gets the same Bootstrap 5 style.

WordPress Category Widget Bootstrap 5 Code

Simply add this to the functions.php and it will make sure the category widget adds in the needed “form-select” class to the dropdown menu.

/**
 * Add CSS class to sidebar category selects.
 */
add_filter( 'widget_categories_dropdown_args', 'sdacinc_2025_widget_categories_dropdown_args' );
function sdacinc_2025_widget_categories_dropdown_args( $args ) {
    if ( array_key_exists( 'class', $args ) ) {
        $args['class'] .= ' form-select';
    } else {
        $args['class'] = 'form-select';
    }
    return $args;
}

WordPress Widget Bootstrap 5 CSS Code

For all other dropdowns in the sidebar – we can add in this code (taken from the Bootstrap 5.3 CSS) to make sure the select is styled as all other selects in Bootstrap:

.widget select { 
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

I hope that helps you better style your WordPress widgets with Bootstrap 5 styles.