Skip Navigation

[Resolved] Setting multiple Bootstrap column classes.

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to customize the - by layouts - set as default col-sm-# class for columns.

Solution:
Layouts provides an API with which you can filter the native column and two classes.

We provide The API to help you achieve this goal. Please check the relevant documentation for the Layouts API reference

Relevant Documentation:
https://toolset.com/documentation/user-guides/layouts-framework-api/#ddl-get-column-prefix
https://toolset.com/documentation/user-guides/using-custom-rows-add-custom-theme-functionality/

This support ticket is created 8 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 2 replies, has 2 voices.

Last updated by MichaelR9215 8 years, 1 month ago.

Assisted by: Beda.

Author
Posts
#376256
Capture2.PNG
Capture.PNG

Hello,

I am working on a website, and I can't seems to figure out this one thing ... I attached a supporting screenshot.

So, I have a 2 column section. The left is text, the right is a button.

On large screens, I want 2 columns, medium can be the same, and small I want to convert to a full width stacked text above button.

In LAYOUTS, I have a row, and in the row I have my 2 columns defined.

My issue is that LAYOUTS automatically places the col-sm-# on my columns, but I need the opposite....

I want my left column to be: col-sm-12 col-md-7 col-lg-8
I want my right column to be: col-sm-12 col-md-5 col-lg-4

Instead, the original classes on my layout columns are:

Left: col-sm-8
Right: col-sm-4

Because LAYOUTS defaults to the col-sm-# class instead of the col-lg-# class, I can't add the other classes properly.

Does this make sense?

Do you have a solution?

Thanks!

#376334

This is how Layouts works.

You can filter the Layout GRID output with this API:
https://toolset.com/documentation/user-guides/layouts-framework-api/#ddl-get-column-prefix
https://toolset.com/documentation/user-guides/using-custom-rows-add-custom-theme-functionality/

But this is custom code, which I can not assist.

Your setup as is, it should already produce the desired output on small screens.

You can also add classes to Rows, Cells and Grids:
https://toolset.com/documentation/user-guides/using-html-css-style-layout-cells/#setting-cells-and-rows-attributes

Please do not hesitate to open a new thread if other issues or problems arise

Thank you for your patience.

#377869

Thanks!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.