2 Columns to 3 - Toolset

This support ticket is created 5 years, 3 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)

Tagged: Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by Pete 5 years, 3 months ago.

Assisted by: Nigel.

Author

Posts

September 12, 2019 at 9:27 am #1338591

Pete

Hi there,

Can anyone tell me what I need to change to the below code to the this grid to display as 3 columns rather than 2?

I have tried changing <wpv-loop wrap="2" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-6">

...various options however nothing i do works and I really don;t wish to try and recreate the gird.

This is the page: hidden link

This the code:

[wpv-layout-start]
[wpv-items-found]

<wpv-loop wrap="2" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-6">[wpv-post-body view_template="loop-item-in-family-friendly"]</div>
[wpv-item index=other]
<div class="col-sm-6">[wpv-post-body view_template="loop-item-in-family-friendly"]</div>
[wpv-item index=2]
<div class="col-sm-6">[wpv-post-body view_template="loop-item-in-family-friendly"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-6"></div>
[wpv-item index=pad-last]
<div class="col-sm-6"></div>
</div>
</wpv-loop>

[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Many thanks, P

September 12, 2019 at 9:56 am #1338621

Nigel

Supporter

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

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

Hi Pete

Use the Loop Wizard and specify 3 columns for the Bootstrap grid and it will generate the markup for you.

This is what it will output (the template name will be different):

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-things"]</div>
		[wpv-item index=other]
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-things"]</div>
		[wpv-item index=3]
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-things"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-md-4"></div>
		[wpv-item index=pad-last]
			<div class="col-md-4"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

You can edit the classnames to specify smaller sizes than medium screens, which is the default.

September 12, 2019 at 10:37 am #1338649

Pete

My issue is resolved now. Thank you!