Call to Action Buttons - force Bootstrap col display around EE looping content

Question

I created a conditional in EE6 using Bootstrap 5 to determine display call to action buttons to show side by side when even number and full width stacked when odd. Used output total grid rows to determine if even or odd. All is working fine except the even numbers are not respecting the col-6 tag which should align side by side, they're stacking as half width on even numbers (odd numbers stack full width across as expected). So I want the first and second buttons to be side by side on one row and the third and fourth buttons to be side by side on a second row. ref: https://snipboard.io/Di908h.jpg

{cta}
<div class="row call-to-action-buttons call-{cta:total_rows}">
{if cta:total_rows % 2 != 0}
    <div class="col">
        <a  href="{cta:cta_url}"  >
            <div class="call-to-action-box">
               {cta:cta_label}
            </div>
        </a>    
     </div>
{/if}
{if cta:total_rows % 2 == 0}
    <div class="col-6 d-inline-flex">
        <a  href="{cta:cta_url}"  class="col">
            <div class="call-to-action-box">
               {cta:cta_label}
            </div>
        </a>
     </div>
{/if}
</div>
{/cta}

Answer 1

I guess you've created your CTA in a grid field.
Your layout indicates (probably) that you have either one or two CTAs (would be odd to have four in two pairs, but five stacked full-width vertically), which suggests you could simplify this layout considerably: I think this would achieve the same output without the duplication...

{cta}
<div class="row call-to-action-buttons call-{cta:total_rows}">
    <div class="col{if cta:total_rows % 2 == 0}-6 d-inline-flex{/if}">
        <a  href="{cta:cta_url}"  >
            <div class="call-to-action-box">
               {cta:cta_label}
            </div>
        </a>    
     </div>
</div>
{/cta}

Anyhow, it looks like the issue is the value being returned by your modulus conditional is not what you thought it was, so a good place to start is to confirm that these values are being calculated as you expected.

First check that the value returned by {cta:total_rows} is what you think it should be - have a look at the call-... value in the class statement and check that the value being appended is the correct one. If it is, try adding some brackets around the value in the modulus formula - something like:

{if {cta:total_rows} % 2 != 0}

and see if that works any better.

If none of that helps post some feedback on what happened when you tried the ideas here and perhaps that will help diagnose the issue for you.

HTH

Answer 2

Could it be you are creating a new row with each cta? Try this:

`
{cta}
{if cta:count == 1} <div class="row call-to-action-buttons call-{cta:total_rows}"> {/if}

...

{if cta:count == cta:total_rows}</div>{/if}
{/cta}