# Assign different classes to alternating blog posts?

**URL:** <https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687>\
**Category:** CMS Development\
**Created:** [August 1, 2018, 8:24pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687 "2018-08-01T20:24:27Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![MrCapp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mrcapp/32/82209_2.png) [@MrCapp](https://community.hubspot.com/u/MrCapp)\
**Post date:** [August 1, 2018, 8:24pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/1 "2018-08-01T20:24:27Z")

</div>

Hello there.

I’m trying to figure out how to apply two different css classes to my blog post entries as they are generated.

In the code below, I have \<div class=“post-item”\> and I would like to append a class to each instance to affect the width of the post.

So the first one would be: \<div class=“post-item width-one-third”\> and the second would be \<div class=“post-item two-thirds”\>.

I’m still feeling my way around the HUBL markup so I’m not sure how to approach this.

Any help is appreciated.

```auto
{% for content in contents %}
 <div class="post-item">
 {% if not simple_list_page %}
 <div class="post-item-inner">
 <div class="features-image-block"> 
 <a href="{{content.absolute_url}}">...

```

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [August 1, 2018, 8:33pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/2 "2018-08-01T20:33:31Z")

</div>

Hello @MrCapp - You can use the modulus (%) operator for that:

```auto
{% for content in contents %}
 {% set extraClass = 'width-one-third' %}
 {% if loop.index % 2 == 0 %}
 {% set extraClass = 'width-two-third' %}
 {% endif %}
 <div class="post-item {{extraClass}}">...</div>
{% endfor %}

```

* * *

If this answer helped, please, mark as solved 😄

* * *

[tim@belch.io](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me [on slack](http://slack.belch.io/).

---

<div class="post-metadata">

**Author:** ![radar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/radar/32/6125_2.png) [@radar](https://community.hubspot.com/u/radar)\
**Post date:** [August 1, 2018, 8:36pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/3 "2018-08-01T20:36:35Z")

</div>

@MrCapp you could use a bit jquery to do this. Something like this could work:

```auto
$(document).ready(function() {

 $('.blog .post-item:odd').addClass('width-one-third');
 $('.blog .post-item:even').addClass('wdith-two-thirds');

});

```

---

<div class="post-metadata">

**Author:** ![radar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/radar/32/6125_2.png) [@radar](https://community.hubspot.com/u/radar)\
**Post date:** [August 1, 2018, 8:37pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/4 "2018-08-01T20:37:48Z")

</div>

Don’t mind the emoji haha

---

<div class="post-metadata">

**Author:** ![lgerodiaz](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lgerodiaz/32/78356_2.png) [@lgerodiaz](https://community.hubspot.com/u/lgerodiaz)\
**Post date:** [August 2, 2018, 1:34pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/5 "2018-08-02T13:34:30Z")

</div>

Hi,

You can use the ‘cycle’ tag for that base on HubSpot’s Designer [documentation](https://designers.hubspot.com/docs/hubl/for-loops#cycle).

To help you get started, use this:

```auto
{% for content in contents %}
 <div class="post-item {% cycle 'width-one-third','width-two-thirds' %}">

```

Let me know if it worked like a charm. Happy coding!

L

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [August 2, 2018, 3:11pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/6 "2018-08-02T15:11:32Z")

</div>

@lgerodiaz - good find… didn’t know about that one.

---

<div class="post-metadata">

**Author:** ![MrCapp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mrcapp/32/82209_2.png) [@MrCapp](https://community.hubspot.com/u/MrCapp)\
**Post date:** [August 2, 2018, 6:18pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/7 "2018-08-02T18:18:14Z")

</div>

Hey lgerodiaz - thanks for your answer - that worked perfectly. That seems to be a simpler method than tjoyce’s answer although that also worked just fine.

However what I didn’t realize was that those classes would be applied the same way for each row of content.

Now I need the classes to reverse for the following row and then keep going back and forth until all the rows of content have been generated. Does that make sense?

The layout on the Hubspot blog shows what I’m trying to get to.

 ![hubbbbb.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/2/e29a94dc067555a581fbebe4326bb5491f10a788.jpeg)

Any idea on how I can do that?

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [August 2, 2018, 9:36pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/8 "2018-08-02T21:36:59Z")

</div>

It is possible with javascript. I put together a sample for you here. The equation would be (4n - 1) and (4n - 2) in order to get your sequence.

[Here’s the fiddle](https://jsfiddle.net/h20nyact/)

* * *

If this answer helped, please, mark as solved 😄

* * *

[tim@belch.io](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me [on slack](http://slack.belch.io/).

---

<div class="post-metadata">

**Author:** ![MrCapp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mrcapp/32/82209_2.png) [@MrCapp](https://community.hubspot.com/u/MrCapp)\
**Post date:** [August 7, 2018, 1:42pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/9 "2018-08-07T13:42:16Z")

</div>

Thanks for the suggestion. I think that would work but I’m trying to avoid JS for this bit.

---

<div class="post-metadata">

**Author:** ![lgerodiaz](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lgerodiaz/32/78356_2.png) [@lgerodiaz](https://community.hubspot.com/u/lgerodiaz)\
**Post date:** [August 2, 2018, 11:00pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/10 "2018-08-02T23:00:44Z")

</div>

@MrCapp I think you could further use the ‘cycle’ tag in this case as it’s not limited only up to two values. In fact, we could add multiple. For example:

```auto
{% for content in contents %}
 <div class="post-item {% cycle 'width-one-third','width-two-thirds', 'width-two-thirds','width-one-third' %}">

```

Which would generate an HTML like this:

```auto
<! -- start of cycle -->
<div class="post-item width-one-third">
<div class="post-item width-two-thirds">
<div class="post-item width-two-thirds">
<div class="post-item width-one-third">
<! -- cycle will repeat again -->
<div class="post-item width-one-third">
<div class="post-item width-two-thirds">
<div class="post-item width-two-thirds">
<div class="post-item width-one-third">

```

So on and so forth.

L

---

<div class="post-metadata">

**Author:** ![MrCapp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mrcapp/32/82209_2.png) [@MrCapp](https://community.hubspot.com/u/MrCapp)\
**Post date:** [August 7, 2018, 1:41pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/11 "2018-08-07T13:41:09Z")

</div>

Thanks again. That did the trick.

For some reason the most recent post is not appearing as the first post in the list and it’s affecting the layout. \*sigh\*

I think once I get that sorted the layout should work as expected.

Thanks again.

---

<div class="post-metadata">

**Author:** ![lgerodiaz](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lgerodiaz/32/78356_2.png) [@lgerodiaz](https://community.hubspot.com/u/lgerodiaz)\
**Post date:** [August 2, 2018, 11:20pm UTC](https://community.hubspot.com/t/assign-different-classes-to-alternating-blog-posts/9687/12 "2018-08-02T23:20:16Z")

</div>

If you want the items to be grouped inside a row, you can use this code instead

```auto
{% for content in contents %}
 {{ '<div class="row">' if loop.index % 2 != 0 }}

 <div class="post-item {% cycle 'width-one-third','width-two-thirds', 'width-two-thirds','width-one-third' %}">
 ...
 </div>

 {{ '</div>' if loop.index % 2 == 0 }}
{% endfor %}

```