Filter style in combination filter

Hello,

I'm trying to create a photo gallery with several filters. In order to do this, I am using the template combination-filter.html.

In this template, the filters are coded like that

<div class="col-md-4">
	<strong>Colors:</strong>
	<div class="btn-group" role="group" data-filter-group="color" style="margin-left: 10px;">
		<a href="#" data-filter="" class="btn btn-primary">Any</a>
		<a href="#" data-filter=".filter-red" class="btn btn-default">Red</a>
		<a href="#" data-filter=".filter-blue" class="btn btn-default">Blue</a>
		<a href="#" data-filter=".filter-green" class="btn btn-default">Green</a>
	</div>
</div>

However, I would like to change the look of the filter. I would prefer if it was looking like in portfolio-1.html. The buttons are a bit bigger, and the color is better too. However, the code is completely different and doesn't work with the <script> for the combination filter.

<ul id="portfolio-filter" class="portfolio-filter clearfix" data-container="#portfolio">
	<li class="activeFilter"><a href="#" data-filter="*">Show All</a></li>
	<li><a href="#" data-filter=".filter-red">Red</a></li>
	<li><a href="#" data-filter=".filter-blue">Blue</a></li>
	<li><a href="#" data-filter=".filter-green">Green</a></li>
</ul>

I've tried many things but I never succeed to adapt this code to the combination filter. Does anyone know how to do?

Thanks a lot!

The problem here is that the button styles on the combifilter page are styled using bootstrap, specifically '<div class="btn-grp" role="btn-group"' which automagically turns an ul list into a joined button group. Whereas the filter on the portfolio page is styled by the canvas CSS stylesheets.

You would need to remove the bootstrap styling form the button group and apply canvas styles to it instead - but this is where the problem lies: the Javascript is looking for the class of 'btn-grp' to attach the correct functionality, but this is the class that casues the bootstrap button group styling. If you remove the class, the buttons appear as you want but all functionality as a filter is lost.

I can't find where the btn-grp class is intercepted to find a work around, but the guys here at canvas are wizards with jquery and JS so they may well have already encountered this and will have a solution.