Skip Navigation

[Resolved] Bootstrap grid not working on archive page

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

Problem:
The output section of a custom archive is set to display as a 3 column Bootstrap grid, but the grid doesn't work, the results are simply stacked.

The site uses Divi.

Solution:
Divi is incompatible with Bootstrap, and so when using Divi together with Toolset it is necessary to disable Bootstrap, as described here: https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/

That means that you cannot use the Bootstrap grid option for the output of a View or custom archive.

The alternatives are to use the table-based grid option, or to roll-your-own grid.

This support ticket is created 6 years, 8 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
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 2 replies, has 2 voices.

Last updated by RichardK5655 6 years, 8 months ago.

Assisted by: Nigel.

Author
Posts
#678129

Hi there
I've set up some test archive pages ( eg - hidden link ), which show all posts added under individual taxonomies. What doesn't appear to be working are the settings linked in the associated view. So I have a page set up and then within divi builder I have the associated view field from the toolset options. The settings I made in the loop wizard in view (for a 3 column bootstrap view) are not showing and the posts are in a single width list down the page.
Any ideas on better controlling the layout of these views?
I'm looking to replicate a standard portfolio type grid such as the one used in Divi - hidden link
Many thanks
Richard.

#678542

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Richard

If you have read the documentation (https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/) you will know that Divi is incompatible with Bootstrap.

Toolset uses Bootstrap for its grid system, but when using Divi you need to disable Bootstrap in Toolset > Settings.

You then have 3 options.

The first is to use tables for grid layout. With the Loop Wizard you will see the option to output posts in a table-based grid, which you can use. You may need to add some minor CSS tweaks to update the styling to your needs (e.g. to not show table borders).

The second is to work with Divi's grid system, and use markup in the View Loop Output that corresponds to the markup generated by Divi when inserting content in columns.

I don't think it is the easiest system to work with, and I would recommend the final option, which would be to make your own mini-grid system style rules using, for example, flexbox or even CSS Grid.

Here's a guide to flexbox that describes what's required: hidden link

And here is a pen that demonstrates a simple 3-column grid that stacks on smaller screens: hidden link

And, finally, let me just re-iterate here that the problem arises because Divi is not compatible with Bootstrap.

#678917

Thanks Nigel