Add .hide class

[NicoHood]

I want to use the following code:

for child in collection|slice(0, 4) %}
  <div class="column col-4 col-md-6 col-xs-12 {% if loop.index == 4 %}hide show-md hide-xs{% endif %}">
    {% include 'partials/card.html.twig' with { 'page': child } %}
  </div>
{% endfor %}

It should show:

default: 3columns, 3 items
xl: 3columns, 3 items
lg: 3columns, 3 items
md: 2columns, 4 items
sm: 2columns, 4 items
xs: 1column, 3 items

In order to get this working I needed to add

.hide {
  display: none;
}

I think it would make sense to add this tiny feature.

[zainsci]

You can just use style attribute inside the if statement like

<div class="column col-4 col-md-6 col-xs-12 {% if loop.index == 4 %}show-md hide-xs{% endif %}" {% if loop.index == 4 %}style="display:none !important"{% endif %}>

[crapthings]

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

[NicoHood]

I dont know why, but I just noticed the hide is not required at all. I dont know how I could oversee this.

@crapthings Also thanks a lot for this useful hint. I guess this issue can be closed then.