How to thematize views forms?

Hello,
The w3css classes can be used in views results and here is a video for it. https://www.youtube.com/watch?v=wCObqmBn3Xk

To customize the view exposed filter, you can do with css only or if you want full control you will have to create a custom twig template and add you html and css there.

For custom twig template: views-exposed-form--{view-name}--{display-name}.html.twig

Here is some css example to customized fields similar to what you have.
If you want me to take a look, just send me the page link.

.view-display-id-w3css_references form.views-exposed-form {
  background-color: #f4f4f4;
  padding: 20px;
}

@media (min-width:993px) {
  .view-display-id-w3css_references #edit-title-wrapper .fieldset-wrapper > div:first-child {
    float: left;
    width: 20%;
  }

  .view-display-id-w3css_references #edit-title-wrapper .fieldset-wrapper > div:last-child {
    float: right;
    width: 79%;
  }

  .view-display-id-w3css_references .form-type-select,
  .view-display-id-w3css_references .form-item-body-value {
    display: block;
    width: 50%;
    float: right;
  }

  .view-display-id-w3css_references .form-item-w3css-paragraphs-node-bg-value {
    display: block;
    width: 49%;
    float: left;
  }

  .view-display-id-w3css_references .form-item-w3css-paragraphs-node-bg-value select {
    min-height: 334px;
  }

}

Best wishes,
Alaa

Hello,
Here is the css for this page.

@media (min-width:993px) {
  #views-exposed-form-consultar-todos-los-diccionarios-page-1 > div {
    position: relative;
  }

  #views-exposed-form-consultar-todos-los-diccionarios-page-1 fieldset#edit-name-wrapper {
    margin-top: 16px;
  }

  #views-exposed-form-consultar-todos-los-diccionarios-page-1 form.views-exposed-form {
    padding: 20px;
  }

  #views-exposed-form-consultar-todos-los-diccionarios-page-1 .form-item-vid,
  #views-exposed-form-consultar-todos-los-diccionarios-page-1 fieldset#edit-name-wrapper {
    float: left;
    width: 49%;
    display: block;
    clear: left;
  }

  #views-exposed-form-consultar-todos-los-diccionarios-page-1 .form-item-description__value,
  #views-exposed-form-consultar-todos-los-diccionarios-page-1 .form-item-field-direccion-value,
  #views-exposed-form-consultar-todos-los-diccionarios-page-1 .form-item-items-per-page,
  #views-exposed-form-consultar-todos-los-diccionarios-page-1 #edit-actions {
    float: right;
    width: 49%;
    display: block;
  }

  #views-exposed-form-consultar-todos-los-diccionarios-page-1 #edit-actions {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  #views-exposed-form-consultar-todos-los-diccionarios-page-1 #edit-actions input {
    float: right;
  }

  #views-exposed-form-consultar-todos-los-diccionarios-page-1 .form-item-description__value {
    margin-top: -16px;
  }

}

Best wishes,
Alaa

Choukran again Alaa,
it took me a while to figure some stuffs out, but finally I could manage it...
just in case somebody else is as lost as I was, I detail here what I did to achieve the change in the form display.
I've adapted a bit the CSS code you provided me to get the format I show in the following image:

1. Search for the name of the twig managing the page where the view is displayed (In my case Alaa gave the hint): views-exposed-form--{view-name}--{display-name}.html.twig
   
   

   find -name "views-exposed-form*"
   cp ./themes/d8w3css/templates/views/views-exposed-form.html.twig ./themes/d8w3css/templates/views/views-exposed-form--consultar-todos-los-diccionarios--page-1.html.twig

   (I have adapted {view-name}--{display-name} accordingly)

2. Edit the new file replacing:
   

   <div class="w3-block form--inline clearfix">
     {{ form }}
   </div>
   

   for the css code, but, VERY IMPORTANT:
   put CSS code between tags <style> and </style>

3. Save and enjoy

Automatically closed - issue fixed for 2 weeks with no activity.