[Resolved] How to create a two-column Bootstrap Grid in my View’s Loop editor

[Author]

Posts

[gregG-3]

Hi,

The link problem is resolved, thank you! Now do you know how to display on two columns instead of one. I chose bootstrap 2 columns but it displays only one.

[Christian Cox]

The basic 2-column loop structure looks like this (with padding active):

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="2" pad="true">
		[wpv-item index=1]
		<div class=" ">
			<div class="col-sm-6">
				[wpv-post-link]
			</div>
		[wpv-item index=2]
			<div class="col-sm-6">
				[wpv-post-link]
			</div>
		</div>
		[wpv-item index=pad-last]
			<div class="col-sm-6"></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]

To offer the best advice, I would need to see the code you are using to create the Loop, including any Content Templates, and I would need to see the View rendered in the browser to inspect other CSS that might be clashing with the Bootstrap grid.

[gregG-3]

Hi,

Here is the code of the View:

[wpv-layout-start]
	[wpv-items-found]
</div>	<!-- wpv-loop-start -->
	<div class="container wpv-loop js-wpv-loop">
	<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 Formations"]</div>
		[wpv-item index=other]
			<div class="col-sm-6">[wpv-post-body view_template="Loop item in Formations"]</div>
		[wpv-item index=2]
			<div class="col-sm-6">[wpv-post-body view_template="Loop item in Formations"]</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>
	</div>
	<!-- wpv-loop-end -->
[wpv-pager-current-page][wpv-pager-total-pages][wpv-pager-nav-links output="bootstrap" first_last_links="true" text_for_first_link="Premier" text_for_last_link="Dernier"]<div class="form-inline">
	<div class="form-group">
		<label>[wpml-string context="wpv-views"]Go to page[/wpml-string]</label>
		[wpv-pager-nav-dropdown output="bootstrap"]
	</div>	
[/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]

[Christian Cox]

There is a closing div tag at line 3 that seems to be unnecessary. You didn't include the Content Template code and you didn't provide a link where I can see this in a browser so that's about all I can tell you based on the information I have.

[gregG-3]

Hi,

I'm sorry but my website is in privatre mode right now, if necessary, I'll find a way to show you.

Here is the template (I think):

[types termmeta='vignette-formation' title='%%TITLE%%' alt='%%ALT%%' align='center' size='full'][/types]
[wpv-taxonomy-title]

PS: my admin is in french and Toolset too, I wish there was a way to keep my admin in french and change the language of Toolset, it would be easier to follow instructions.

[gregG-3]

You'll find attached an image of the view in a browser. Hope that helps.

[Christian Cox]

No it doesn't really help. I need to inspect the CSS applied to each element and I need to use the browser console to test changes.
Remove the types field shortcode temporarily, then test again. Are the columns shown as expected without the image shortcode?

I can log in and take a look if you provide login credentials in the private reply fields here. I can log in to a similar test environment where you have removed private data. I can work locally from a Duplicator site clone. I am open to any other suggestions, but I probably can't fix the problem without being able to see the problem in a browser.

[gregG-3]

I have granted access to the public.

Here is the page hidden link

I tried removing the images and it's still one column.

Let me know if you need admin access to the website.

[Christian Cox]

Bootstrap grid Views require the Bootstrap library, but it doesn't seem to be loaded on your site. Toolset can load it for you. Go to Toolset > Settings > General tab and scroll down to the Bootstrap loading section. Choose "Toolset should load Bootstrap 3".

[gregG-3]

Hi,

Thank you. It's working. I'll keep on working on the website and will probably open new support ticket for other questions.

[gregG-3]

My issue is resolved now. Thank you!