Skip Navigation

[Resolved] Different Bootstrap columns widths in different parts of a layout

This support ticket is created 6 years, 6 months 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.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 1 reply, has 2 voices.

Last updated by Luo Yang 6 years, 6 months ago.

Assisted by: Luo Yang.

Author
Posts
#894234
next-level-ed-header-columns-screenshot.png

Tell us what you are trying to do?
I have a common page layout for the site header (logo, main nav) and footer etc.
I need to use .col-xs in the header and .col-sm for everything else in the layout, but it looks as though you can only set a global "Column Width" in the layout that is used for all elements so all elements are forced to use on setting.
Is there a way to override this and change each section manually?

See screeshot: I need the logo and the mobile nav button to be next to one another, not stacked - col-xs and NOT col-sm

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?
hidden link

#895700

Hello,

Yes, you can add specific CSS class to each Layout row and cell, see our document:
Styling an entire row
https://toolset.com/documentation/user-guides/adding-custom-styling-to-a-layout/#row
screenshot:
hidden link

Styling individual cells
https://toolset.com/documentation/user-guides/adding-custom-styling-to-a-layout/#cell
Screenshot:
hidden link