[Resolved] bootstrap columns

[Author]

Posts

[johnh-18]

Tell us what you are trying to do?
I would like to create 5 columns in a row instead of 6 (see attached screen shot) but 5 does not appear to be an option in bootstrap - is there a way around this?

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?
hidden link

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

Hello and thank you for contacting the Toolset support.

Bootstrap grid is a 2 column grid. For a 6 columns design, we use two Bootstrap grid column for each column of ours, that's why we use the col-sm-2 CSS class:

<div class="col-sm-2"></div>

Toolset wraps the number of configured columns for the view in a row, you can use the index argument of the wpv-item shortcode to add a 1 column before and after the items, something like:

<wpv-loop>
    [wpv-item index=1]
      <div class="col-sm-1"></div>  <!-- <=== We add this -->
      <div class="col-sm-2">  The post here </div>
    [wpv-item index=other]
      <div class="col-sm-2">  The post here </div>
    [wpv-item index=last]
      <div class="col-sm-2">  The post here </div>
      <div class="col-sm-1"></div>  <!-- <=== We add this -->
 </wpv-loop>

More about these shortcodes here: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-154400

I hope this helps. Let me know if you have any questions.

[johnh-18]

Hi Jamal,
Thank you for your message. Tried the code you sent but still get 6 columns although the last slot is empty - please see attached screenshot.
What am I doing wrong?
Best regards

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

I suspect that the view is still configured to display 6 posts per row. You can use the wrap shortcode argument to force the use of 5 elements per row.

<wpv-loop wrap="5" pad="true">

More about it here https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-154381

If this does not help, please allow me temporary access and let me check this closely. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

Hello Jhon, it seems to work, check this screenshot hidden link
It just needs to change my code:

The post here

With the content template:

[wpv-post-body view_template="loop-item-in-homepage-spain-5-most-recent"]

I did this change and I tested on a private page called "TS Test". Check this screenshot hidden link

Please note that the Bootstrap grid is a 12 column grid, and that is non-divisible by 5.

I hope this helps. Let me know your feedback

[johnh-18]

Hi Jamal,
Thank you. Is the fact that 5 is not divisible by 12 the reason there are big left and right margins?
Did a few searches and found this page that suggest using 2dot4 (12 / 5 = 2.4) to achieve this so tried the following CSS which seems to work apart from one important thing - the entries is not aligned in a row.
See hidden link

Is this a possible way forward OR is there any other way to get rid of the left and right margin?

Best regards / john

.col-sm-1,
.col-2dot4,
.col-sm-2dot4 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-2dot4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}

@media (min-width: 540px) {
.col-sm-2dot4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

I think it is a good solution. It just needs to be floated left:

fload: left;

Check this screenshot hidden link

And then, you can remove the 1column divs that we have added to the first and last cells:

<div class="col-sm-1"></div>

The empty left column is caused by another Elementor div on the page, check this screenshot hidden link

[johnh-18]

My issue is resolved now. Thank you!