Tell us what you are trying to do? Collapse a 4 column grid to 3 columns on viewport breakpoint (then 2 cols and so on)
Is there any documentation that you are following? https://toolset.com/forums/topic/need-help-with-bootstrap-grids-problem-in-responsive-modes/
Is there a similar example that we can see? only my working example - hidden link
What is the link to your site? hidden link - it's behind maintenance mode so I've created an admin login for you as follows:
<access data deleted by forum support>
When I removed the wrap="4" and pad="true" the grid only showed 4 products (out of 6). When I removed the [wpv-item index=1], etc. the product showed visible code next to them.
The loop is as follows:
[wpv-post-featured-image size="2048x2048"]
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-6 col-md-4 col-lg-3">[wpv-post-body view_template="loop-item-in-shop-archive"]</div>
[wpv-item index=2]
<div class="col-sm-6 col-md-4 col-lg-3">[wpv-post-body view_template="loop-item-in-shop-archive"]</div>
[wpv-item index=3]
<div class="col-sm-6 col-md-4 col-lg-3">[wpv-post-body view_template="loop-item-in-shop-archive"]</div>
[wpv-item index=4]
<div class="col-sm-6 col-md-4 col-lg-3">[wpv-post-body view_template="loop-item-in-shop-archive"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-6 col-md-4 col-lg-3"></div>
[wpv-item index=pad-last]
<div class="col-sm-6 col-md-4 col-lg-3"></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]
I look forward to any thoughts.
Best regards
James
This is already the case when you activate (for example) Bootstrap 4 in Toolset > Settings > General, and then create a View, using the Bootstrap Grid (let's say 4 columns).
It'll then produce 4 columns on desktop and shrink to one column, the smaller (narrower) the screen size.
It's true that it does not first shrink to 3, and 2 columns.
But this is Bootstrap's default behaviour, see hidden link
Does this not work on your end?
This is an example loop output it produces:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
[wpv-item index=2]
<div class="col-md-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
[wpv-item index=3]
<div class="col-md-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
[wpv-item index=4]
<div class="col-md-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
</div>
[wpv-item index=pad]
<div class="col-md-3"></div>
[wpv-item index=pad-last]
<div class="col-md-3"></div>
</div>
</wpv-loop>
</div>
<!-- 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]
Note:
This can also be set up on Blocks generated View, where you can additionally use grids where you can hide or show single blocks depending on the screen sizes. Perhaps this approach suites your project more?
Hi Beda,
Many thanks for getting back to me. It does indeed collapse from 4 cols to 1 but that doesn't look great on mid sized viewports as the 4 cols are squeezed to breaking point before collapsing.
What I'd like is for them to degrade gracefully as the screen size gets smaller.
It appears that the wrap command is causing the issue on 3 cols. On 2 cols it behaves.
Ordinarily, the cost should be able to wrap as follows, shouldn't they?:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 1</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 2</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 3</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 4</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 5</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 6</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 7</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 8</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 9</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 10</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 11</p></div>
<div class="col-lg-4 col-md-6 col-xl-3"><p>Box 12</p></div>
</div>
</div>
So, you'd get 4 cols and an XL screen, 3 cols on a large screen, and 2 cols on a small screen.
Is there any way I can mimic this?
Best regards
James
Yes, but this is Bootstrap native default behaviour, Toolset can't really change this.
You can of course add other classes, like in your example.
In a View Loop, since "things repeat" in there, you'd add this just once
So taking your example you'd do:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-lg-4 col-md-6 col-xl-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
[wpv-item index=2]
<div class="col-lg-4 col-md-6 col-xl-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
[wpv-item index=3]
<div class="col-lg-4 col-md-6 col-xl-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
[wpv-item index=4]
<div class="col-lg-4 col-md-6 col-xl-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
</div>
[wpv-item index=pad]
<div class="col-lg-4 col-md-6 col-xl-3"></div>
[wpv-item index=pad-last]
<div class="col-lg-4 col-md-6 col-xl-3"></div>
</div>
</wpv-loop>
</div>
<!-- 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]
That will shrink to 3, then to 2, then to 1 (from 4 as starting point)
It works also with 3, or less, or more, but you'll have to adapt the loop (like below example with 3 columns)
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-lg-4 col-md-6 col-xl-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
[wpv-item index=2]
<div class="col-lg-4 col-md-6 col-xl-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
[wpv-item index=3]
<div class="col-lg-4 col-md-6 col-xl-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
</div>
[wpv-item index=pad]
<div class="col-lg-4 col-md-6 col-xl-3"></div>
[wpv-item index=pad-last]
<div class="col-lg-4 col-md-6 col-xl-3"></div>
</div>
</wpv-loop>
</div>
<!-- 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]
Many thanks Beda,
Yep, I'tried that, but when the grid collapses to 3 cols, the second row only had 1 col (and I think this would repeat on every other row as it's using the wrap="4"). I've attached a pic showing the issue.
Any thoughts welcomed.
Best regards
James
I understand what you mean now, but this seems like a restriction of how Bootstrap grids work, together with the wrap of Toolset.
Toolset's wrap is not dynamic in this sense when set, it means it will handle the loop items in batches of 4.
Whether on large or smalls screen that won't matter. This is like hardcoding "groups of 4" which then try to apply the Bootstrap dynamic classes in these groups for each item.
Now - to achieve what you show here https://toolset.com/forums/topic/bootstrap-4-responsive-grid-columns/#post-1604105 you actually don't need any of the Toolset Bootstrap Grid, I found.
This simple View loop will already produce exactly that output:
<div class="row">
<wpv-loop>
<div class="col-lg-4 col-md-6 col-xl-3">[wpv-post-body view_template="loop-item-in-lhugzfhdgf"]</div>
</wpv-loop>
</div>
I suggest in this case using "Disable the wrapping DIV around the View" but it's not a must.
This seems to produce the precise same output as if I use your example in an online Bootstrap Code simulator, so it should fit the goal.
Please let me know if this helps.
Thats perfect! Many thanks Beda. I couldn't work out how to remove the wrap without losing products.
Thats now displaying exactly how I wanted it.
Much appreciated.
J
