---
title: "Dropdowns not working on the front-end?"
description: "Why this happens and how to apply a fix (Bootstrap conflict explained)"
url: https://help.wpdatatables.com/en/articles/45-dropdowns-not-working-on-the-front-end
collection: "Technical issues"
updated: 2026-10-26
language: en
---

# Dropdowns not working on the front-end?

Why this happens and how to apply a fix (Bootstrap conflict explained)

If the dropdowns in your table work fine in the **back-end preview**, but **not on the front-end**, it’s likely caused by a conflict between your WordPress theme’s Bootstrap version and our Plugin.

### ✅ Step 1: Confirm the Issue

1.  **Switch to a default WordPress theme**, like **Twenty Twenty-Five**
    
2.  **Refresh the page** and check if the dropdowns now work
    

➡ If they work with the default theme → your current theme likely conflicts with the dropdown system we use in wpDataTables.

* * *

### 🛠 First Thing to Try

Go to:  
**wpDataTables → Settings → Customize → Include full bootstrap front-end**

👉 **Uncheck** this option.

![](https://staticfiles.gleap.io/ghelparticle/6icMRU95I5ltioYlBrn3vdWjnscA3Gn1LcHpZ2LoYErqvc1Xj3yJbSZNouEud02espYgOLVlRNS.png)

Then **refresh your front-end page** and check if the dropdowns are now working.

-   ✅ If they **work** — great! You can leave the option disabled.
    
-   ❌ If they **still don’t work** — go back and **re-enable** the checkbox, then proceed to the workaround below.
    

* * *

### 🚧 Why This Happens

wpDataTables currently uses **Bootstrap 3**.  
Many themes today use **Bootstrap 4 or newer**, which can cause conflicts — especially with dropdown components.

Our developers are working on updating Bootstrap in a future version, but in the meantime, here’s a safe workaround.

* * *

### ✅ The Fix (Workaround)

### ✏ **Step 2: Add a Code Snippet to Your Theme’s (or child theme’s)** `functions.php`

This is an **example** we used for the ‘VW Ecommerce Store’ theme:

```javascript
function bootstrap_dequeue_script() {
    $page_content = get_the_content();
    $pageContainsWpdt = has_shortcode($page_content, 'wpdatatable');
if ($pageContainsWpdt) {
        wp_dequeue_script('bootstrap-js');
    }
}
add_action('wp_print_scripts', 'bootstrap_dequeue_script', 100);
```

### 🔧 **What to Customize:**

-   `'bootstrap-js'` → Replace this with the script slug your theme uses to load Bootstrap.  
    Common examples include `'bootstrap'`, `'bootstrap-js'`, or others.  
    🛈 _If you're unsure, ask your theme’s support team for the correct script handle_ — then replace it in this line:  
    `wp_dequeue_script('your-theme-slug-here');`
    

This code is safe to use and won’t be affected by wpDataTables plugin updates.

⚠ Just note: We **recommend using a child theme**, because if you update your main theme, any custom code added to its `functions.php` file might be overwritten.

You can read more about the benefits of using a child theme here:  
👉 [https://www.wpbeginner.com/glossary/child-theme/](https://www.wpbeginner.com/glossary/child-theme/)

* * *

### ✏ Step 3: Add Custom CSS

Go to:  
**wpDataTables → Settings → Custom JS and CSS →** Custom wpDataTables CSS

Paste this:

```javascript
.bootstrap-select.btn-group .dropdown-menu {
    visibility: visible;
    transform: unset;
    opacity: 1;
    -webkit-transform: unset;
}
```

This ensures the dropdown is fully visible and interactive.

* * *

### 🔄 **Looking Ahead**

Our developers are working on updating the internal Bootstrap version in a future plugin release.

We don’t have an exact ETA, but you can follow our [changelog](https://wpdatatables.com/help/whats-new-changelog/) and subscribe to our [newsletter](https://wpdatatables.com/newsletter/) to be notified about major fixes and improvements.

Once that update is released, this workaround will no longer be necessary.

* * *

### 💬 Need Help?

If the fix doesn’t solve the issue, feel free to reach out to our Support Team.  
We’ll be happy to assist you!