How do I remove a DIV from the rendered result of a BEF exposed form?

Question

I'm using Bootstrap as my theme and Better Exposed Filters to generate check boxes for term filters that are exposed to my visitors/users. Unfortunately, Bootstrap adds a "form-group" class to all elements of a form that aren't radio buttons and/or check boxes. BEF (or something) adds a DIV around each of the check boxes and thus Bootstrap adds the form-group class and that messes with the formatting of the check boxes.

So it looks like:

    <div class="form-type-bef-checkbox form-item-edit-field-list-crit-tags-tid-591 form-item form-group">
 <input type="checkbox" name="field_list_crit_tags_tid[]" id="edit-field-list-crit-tags-tid-591" value="591"  multiple="multiple" class="form-control" /> <label class='option' for='edit-field-list-crit-tags-tid-591'>WAAC</label>
</div>

I need to remove either the DIV entirely or figure out a way to NOT put the form-group class on that particular div.

Answer 1

why not just write CSS that targets this item and removes any css applied by the default bootstrap .form-group ?

For example the rule could look like:

div.from-type-bef-checkbox.form-group {
  /* then "undo" whatever .form-group is doing -- you can see whatever it's
     doing by using Firebug or Google Chrome and inspecting the Element
     on the page.

     for example:
  */
  margin: 0 0 0 0;
}

By fixing just the CSS and not removing the css class or the div entirely you dont break or worry about upgrading these modules (of course you'll still have to check this CSS fix works in newer versions of the theme).

You can do this in your theme by adding or using a default custom stylesheet provided by your theme.