[Resolved] View Loop Wizard's Bootstrap grid columns are not working

[Author]

Posts

[canguruC]

I am trying to:
I'm trying to organize this results in 2 columns. I selected columns: 2 in the bootstrap grid but it doesn't work. I tried to change the number of columns and back, but nothing.

I also noticed after adding some css that there is a weird blanc container at the end.

Link to a page where the issue can be seen:
hidden link
I expected to see:
Something like this hidden link
Instead, I got:
hidden link

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

From your website's code, I noticed that the Bootstrap library is not loading, which is why its grid/column classes aren't working.

Please go to WP Admin -> Toolset -> Settings -> General and select "Toolset should load Bootstrap 4" option for "Bootstrap loading".

Also, the following custom CSS code from the view will interfere with the Bootstrap's grid/column classes default functionality, so you'll need to remove/adjust it as well.

.col-sm-6 {
    display: flex !important;
    box-shadow: 0px 2px 20px 0px rgb(48 70 89 / 14%);
    padding: 20px;
    border-radius: 22px;
    margin: 40px 0px;
}

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[canguruC]

If I remove that CSS, I will lose the "card style" I'm after. How can I achieve this, then?

[Waqar]

Thanks for writing back.

I'll recommend the following changes.

1. Currently, your view's loop item output structure is:

<div class="row">
	<div class="col-sm-6">
		<div class="pea-info">
		...
		</div>
		<div class="pea-info">
		...
		</div>
	</div>
	<div class="col-sm-6">
		<div class="pea-info">
		...
		</div>
		<div class="pea-info">
		...
		</div>
	</div>
</div>

I'll recommend including a new div with class "pea-info-card", inside div with the grid column class "col-sm-6":

<div class="row">
	<div class="col-sm-6">
		<div class="pea-info-card">
			<div class="pea-info">
			...
			</div>
			<div class="pea-info">
			...
			</div>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="pea-info-card">
			<div class="pea-info">
			...
			</div>
			<div class="pea-info">
			...
			</div>
		</div>
	</div>
</div>

2. Next, from the custom CSS code, remove the existing code:

.col-sm-6 {
  display: flex !important;
  box-shadow: 0px 2px 20px 0px rgb(48 70 89 / 14%);
  padding: 20px;
  border-radius: 22px;
  margin: 40px 0px;
}

And in its place, include:

.container.wpv-loop > .row {
  margin-bottom: 2%;
}

.pea-info-card {
  display: flex !important;
  box-shadow: 0px 2px 20px 0px rgb(48 70 89 / 14%);
  padding: 20px;
  border-radius: 22px;
  margin: 40px 0px;
  height: 100%;
}

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/