Mixitup and Bootstrap Data Toggle Interference Solution

Beacon Blog Article

By Zedric Myers | Published February 18, 2020 | Categories: Web Development

If using Mixitup and Bootstrap data-toggle attributes on the same page, you will notice conflicts where the Mixitup "mixitup-control-active" class will be applied to all data-toggle references for a toggle button.

To remedy this, you can add the following code to your Mixitup buttons and Mixitup script.

Add this attribute to each button of the Mixitup buttons only.



<button class="control control-color" data-mixitup-control="" data-toggle=".bachelors" type="button">BUTTON TEXT</button>
Next, add the following code to your Mixitup script.
var mixer = mixitup(containerEl, {
selectors: {
control: '[data-mixitup-control]'
controls: {
toggleDefault: 'all'

Let's get to work!

Contact Us