Drupal 8 view filter styling

Displaying filters as four columns in Drupal 8 using the Bootstrap theme. Use Autoprefixer.

.view-filters{
  .form-inline{
    .form-group{
      margin-bottom: $spacing / 2;
    }
  }
  .form-control{
    width: 100%;
  }
  .select-wrapper{
    width: 100%;
  }
}
@media (min-width: $screen-sm-min) {
  .view-filters{
    .form-inline{
      display: flex;
      flex-wrap: wrap;

      .form-group{
        flex: 1 0 25%;
        max-width: 25%;
        padding: 0 15px;
      }
      .form-actions{
        flex: 1 0 100%;
        max-width: none;
      }
    }
  }
}
@media (max-width: $screen-xs-max) {
  .view-filters{
    .form-inline{
      .form-group{
        width: 100%;
      }
    }
  }
}

Leave a comment

Your email address will not be published. Required fields are marked *