Bootstrap Rows Added to Elements

[SmallDogCreative]

I am trying to clean up the narrow columns created on tablets when using a 4 column layout. I want to make the icon boxes do the following: col-xs-12 col-sm-6, col-md-3, col-lg-3. I noticed the default builder creates the sm styles, so I used the builder to create the sm widths, and added bootstrap css to create the lg styles. This should work, however I am running into an issue. When I create 2, 6 col sm next to each other the builder is putting them in a row. This prevents the row below from moving up, like it would in standard bootstrap.

How do I remove the added row, or create the desired item styling?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Can you add a login so I can edit that page with you, or create a test page?

Are you trying to set a different layout for the three screen sizes? Desktop / Tablet / Mobile?

Thanks.

[SmallDogCreative]

This reply has been marked as private.

[Kyle – SUPPORT]

Yes it’s because the page builder creates rows for these 2 ‘rows’ of icon boxes, that’s why the 3rd one doesn’t move up onto the top row. I will forward to the developer to see if there’s a way around this for you

– Kyle

[Swift Ideas – Ed]

Hi @SmallDogCreative

Does it work if you set the items in the page builder to be 1/4, then add custom class to each (col-lg-3)?

We are looking at potential solutions for this in future updates.

– Ed