Add Bootstrap 5 Classes to WordPress Widgets
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:
- For the category widget we have the option to add in a class using a function in your theme’s functions.php file
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 | /** * 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .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.