Can I use Bootstrap 4? Specifically trying to use cards in a View slider.

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.

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

Problem: Can I use Bootstrap 4 cards?

Solution: We currently offer the ability to load Bootstrap 3 in Toolset settings, but you can disable that and enqueue your own version of Bootstrap 4 in your theme. The Types GUI and Views GUI are not set up to produce the correct markup for Bootstrap 4 features, so you must create the correct HTML and add CSS as needed. Be sure to turn off Bootstrap 3 in Toolset > Settings > General

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

This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Sliders, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by katrina 7 years ago.

Assisted by: Christian Cox.

Author

Posts

December 21, 2017 at 4:42 am #600708

katrina

I am trying to: Use Bootstrap 4 "card" class in a Views Slider

Link to a page where the issue can be seen: I would like to keep private and not post publicly

I expected to see: My slider show with 5 items displayed in equal sized divs horizontally

Instead, I got: Strange output.

I have a slider set to show 5 items at a time of a custom post type.

I have this code in my Loop Output Editor:

[wpv-layout-start]
	[wpv-items-found]
		<div id="bulletins" class="nopadding">
          <div class="card-group">
		  <!-- wpv-loop-start -->
		  <wpv-loop>
		  [wpv-post-body view_template="Bulletins - slide"]
		  </wpv-loop>
		  <!-- wpv-loop-end -->
          </div>  
		</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]

And this in the template editor (the slide code):

<div class="card bg-transparent">
    <div class="card-body">
		<h5 class="card-title">[wpv-post-title]</h5>
		<p class="card-text">[wpv-post-body view_template="None"]</p>
		<a href="[wpv-post-url id="$page"]" class="card-link btn">Learn More</a>
	</div>
</div>

But the items are not displaying horizontally in a row.

I went to Toolset settings to select Bootstrap 4, but I don;t see that as an option.

Thanks in advance for helping me figure this out. I would like to use the cards to create 5 equal width items using bootstrap, rather than custom percentage css widths.

December 21, 2017 at 7:34 pm #600943

Christian Cox

Hi, once version 4 is stable and released, we plan to support the new version. For now, version 4 is still only a beta release, so our system is designed to work with Bootstrap 3. If you need to use Bootstrap 4, you can disable Toolset's Bootstrap version in Toolset > Settings > General > Bootstrap loading, and enqueue your own version independently in your theme or child theme. Then you can manually add the classes and markup needed to create Bootstrap 4 elements like cards.

December 21, 2017 at 8:05 pm #600955

katrina

Hi Christian,
thanks so much for your reply. Ok, understood!
Fortunately, somehow, it happens to be working as intended suddenly.
I'll check to make sure Bootstrap is disabled though, since I do load it in my theme.
Katrina

The forum ‘Types Community Support’ is closed to new topics and replies.