Drupal Bootstrap 8.x-3.x - Views Exposed Form Toggle

styles.css

/** Add this to your sub-theme style overrides. **/

.filters-wrapper-toggle {
    margin: 15px 0;
}
@media screen and (min-width: 768px) {
  .filters-wrapper-toggle {
    display: none;
  }
  .filters-wrapper {
    display: block;
  }
}

views-exposed-form.html.twig

{#
In your sub-theme, create this file ./THEMENAME/templates/views/views-exposed-form.html.twig and place this contents in it.

/**
 * @file
 * Default theme implementation of a views exposed form.
 *
 * Available variables:
 * - form: A render element representing the form.
 *
 * @ingroup templates
 *
 * @see template_preprocess_views_exposed_form()
 */
#}
{% if q is not empty %}
  {#
    This ensures that, if clean URLs are off, the 'q' is added first,
    as a hidden form element, so that it shows up first in the POST URL.
  #}
  {{ q }}
{% endif %}
<div class="clearfix">
  {{ form }}
</div>

ViewsExposedForm.php

<?php
// In your sub-theme, create this file ./THEMENAME/src/Plugin/Preprocess/ViewsExposedForm.php and place this contents in it.

/**
 * @file
 * Contains \Drupal\THEMENAME\Plugin\Preprocess\ViewsExposedForm.
 */

namespace Drupal\THEMENAME\Plugin\Preprocess;

use Drupal\bootstrap\Annotation\BootstrapPreprocess;
use Drupal\bootstrap\Plugin\Preprocess\PreprocessBase;
use Drupal\bootstrap\Utility\Element;
use Drupal\bootstrap\Utility\Variables;
use Drupal\Component\Utility\Html;
use Drupal\Core\Url;

/**
 * Implements hook_form_FORM_ID_alter().
 *
 * @ingroup plugins_form
 *
 * @BootstrapPreprocess("views_exposed_form")
 */
class ViewsExposedForm extends PreprocessBase {

  /**
   * {@inheritdoc}
   */
  public function preprocessVariables(Variables $variables) {
    $q = Element::create($variables->offsetGet('q', []));
    $form = Element::create($variables['form']);

    // Generate an unique ID for the filters wrapper.
    $id = Html::getUniqueId('filters-wrapper');

    // Build the wrapper.
    $wrapper_build = ['#theme_wrappers' => ['container__filters_wrapper']];
    $filters_wrapper = Element::create($wrapper_build);
    $filters_wrapper->addClass(['filters-wrapper', 'collapse', 'well', 'form-inline']);
    $filters_wrapper->setAttribute('id', $id);

    // Move all the form children to the wrapper. This is ok
    // to do it here since this is about final rendering, not
    // actually altering the form.
    foreach ($form->children() as $key => $child) {
      $filters_wrapper->{$key} = $child;
      unset($form->{$key});
    }

    // Add the wrapper to the form.
    $form->filters_wrapper = $filters_wrapper;

    // Create a toggle for showing/hiding the filters.
    $build = [
      '#type' => 'link',
      '#title' => t('Filters'),
      '#url' => Url::fromUserInput('#' . $id),
    ];
    $q->toggle = Element::create($build)
      ->addClass(['filters-wrapper-toggle', 'btn'])
      ->colorize()
      ->setIcon()
      ->setAttribute('data-toggle', 'collapse')
    ;
  }

}