[Resolved] Bootstrap 4 tabpanel with Toolset Views

[Author]

Posts

[Matthias]

Hi,

I setup a custom post type with only the standard fields post title and post content. I'd like to display all items as tabbable content with Bootstrap 4. The HTML layout looks like this: hidden link
The post titles should be the nav items and the post contents the tab panes accordingly.

Is it possible to create a view for this?

Cheers,
Matthias

[Christian Cox]

Hi, we're in the process of updating our support for Bootstrap - Bootstrap 3 is currently supported but not Bootstrap 4. Bootstrap 3 supports tabs, which are similar to Bootstrap 4 navs: https://getbootstrap.com/docs/3.3/javascript/#tabs
You may be able to use Views to produce the required output if you are comfortable with Bootstrap 3.

If you want to use Bootstrap 4, it's not as straightforward right now. You'll have to enqueue the Bootstrap 4 library into your custom theme and tell Toolset that your theme is already loading Bootstrap 3 (Toolset > Settings > General tab).

In either case, you will most likely need 2 Views - one for the tab links and another for the content panels. You need 2 Views because you can only have one loop in each View, and the markup requires two loops. You will create the markup manually in the Loop editor. I can provide some assistance here if necessary.

Let me know if you have questions about this.

[Matthias]

Hi Christian,

thank you for your reply. I already found out that I need two views. I also managed to nest these two views in another taxonomy view and this works quite well for the moment.

Cheers,
Matthias