[Resolved] Only see 1 column in Bootstrap Grid even though selected 4 in wizard

[Author]

Posts

[richardB-13]

I am trying to follow this tutorial and video. https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/build-custom-queries-to-list-posts-with-elementor-and-toolset/

I only get 1 column in my output even though I selected 4 for the bootsrap grid. The search fields also are in one stacked column vs 4 horizontal columns.

i have tried several times and do not know what i am doing wrong or missing.

Here is the code in the loop editor:

[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-3">[wpv-post-body view_template="Loop item in Dogs View Search"]</div>
[wpv-item index=other]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in Dogs View Search"]</div>
[wpv-item index=4]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in Dogs View Search"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-3"></div>
[wpv-item index=pad-last]
<div class="col-sm-3"></div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

[wpv-post-featured-image]
[wpv-post-link]
[types field="callname"][/types]
[types field="registeredname"][/types]
[types field="akcregnumber"][/types]
[types field="ukcregnumber"][/types]
[types field='dob' style='text' format='m/d/y'][/types]

CSS Editor:

.dog-title > a{
font-weight: 500;
}

.dog-title{
margin-top: 15px;
}

Here is the code from the search and pagination:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
<label class="label">[wpml-string context="wpv-views"]Search by Title {press enter to search}[/wpml-string]</label>
[wpv-filter-search-box placeholder="Dog Title" output="bootstrap" class="input-style"]
</div>

<div class="row">
<div class="col-sm-3"><div class="form-group">
<label class="label">[wpml-string context="wpv-views"]CallName[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-callname" type="select" default_label="Call Name" format="%%NAME%%" url_param="wpv-wpcf-callname" class="input-style"]]
</div></div>
<div class="col-sm-3"><div class="form-group">
<label class="label">[wpml-string context="wpv-views"]RegisteredName[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-registeredname" type="select" default_label="Registered Name" format="%%NAME%%" url_param="wpv-wpcf-registeredname" class="input-style"]]
</div></div>
<div class="col-sm-3"><div class="form-group">
<label class="label">[wpml-string context="wpv-views"]AKCRegNumber[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-akcregnumber" type="select" default_label="AKC #" format="%%NAME%%" url_param="wpv-wpcf-akcregnumber" class="input-style"]]
</div></div>
<div class="col-sm-3"><div class="form-group">
<label class="label">[wpml-string context="wpv-views"]UKCRegNumber[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-ukcregnumber" type="select" default_label="UKC #" format="%%NAME%%" url_param="wpv-wpcf-ukcregnumber" class="input-style"]]
</div></div>
<div class="col-sm-3">[wpv-filter-reset reset_label="Reset Search" output="bootstrap" class="reset-button"]]</div>
</div>

[/wpv-filter-controls]
[wpv-filter-end]

Thanks in advance for your help.

[Shane]

Hi Richard,

Thank you for contacting our support forum.

The issue here seems to be that you don't have bootstrap loading enabled. What you need to do is go to Toolset -> Settings and scroll to Bootstrap loading and enable Bootstrap 3

Please let me know if this helps.

Thanks,
Shane

[richardB-13]

My issue is resolved now. Thank you!

Thank you Sir. That did the trick. Do you have the CSS styling for that tutorial video somewhere that I could copy?