Offset in the grids

Did you edit the configuration of the view after the update? There were structural changes that I couldn’t write an update hook for because it would have been making assumptions. You need to go in and edit how many columns are expected at the different Bootstrap breakpoint sizes (xs, sm, md, lg). Previously, they were breaking at 4 columns regardless if you wanted more.

I have added the ability to set the base number of columns. In your case, set it to 4. While I have committed the code, I'm not sure when I will be doing a release, so I have also attached a patch.

Hmmm. Looking at the history of the file, the "all" was actually removed in the code in 2018. However, that wasn't released until the 3.2 release that I just did. So all of the column sizes should be divisible by 12. That is why the default per row had been set at 12. That would allow 12 in a row and then for them to break evenly. Here is a new patch with all (actually 999 as it was in 3.1). Please test. Test also the 12. I would love to know how/why it's not breaking evenly with 12.

That is a strange error there. Unless $options['columns'] is getting set to 0 somewhere in the views module, the math would never be a divide my zero. I wonder if there is another max allowed that I'm not seeing.

What happens when you set the base columns to 12?

I did that on my local tests with the patch and had things break as they should.

Hello, I think the Division By Zero Error in your patch can be resolved by changing:

'all' => 999

to:

999 => 'all'

Hello zenimagine,

I was looking at https://www.s1biose.com/fr/article and believe if you set your 'Base number of columns' to 12 from the current 4 and update your 'views-bootstrap-grid.html.twig' file to include the lines below your columns will work without any gaps or lagging.

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
<div id="{{ id }}" {{ attributes.addClass(classes) }}>
  {% if options.alignment  == 'horizontal' %}
    {% for row in items %}
      <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
        {% for column in row.content %}
          <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
            {{ column.content }}
          </div>

          {% if loop.index is divisible by (sizes.xs) %}
            <div class="clearfix visible-xs-block"></div>
          {% endif %}

          {% if loop.index is divisible by (sizes.sm) %}
            <div class="clearfix visible-sm-block"></div>
          {% endif %}

          {% if loop.index is divisible by (sizes.md) %}
            <div class="clearfix visible-md-block"></div>
          {% endif %}

          {% if loop.index is divisible by (sizes.lg) %}
            <div class="clearfix visible-lg-block"></div>
          {% endif %}

        {% endfor %}

      </div>
    {% endfor %}
  {% else %}

I hope that helps.

Hi ,

Sorry the other code was incorrect.

For your instance your require:

          {# xs:1c, s:2c, m3c, l:4c #}

          {% if (col_xs == "col-xs-12") and (col_sm == "col-sm-6") and (col_md == "col-md-4") and (col_lg == "col-lg-3") %}
            {% if loop.index is divisible by(2) %}
              {# place clearfix after every second occurence #}
              <div class="clearfix counter-{{ loop.index }} visible-sm-block"></div>
            {% endif %}
            {% if loop.index is divisible by(3) %}
              {# place clearfix after every third occurence #}
              <div class="clearfix counter-{{ loop.index }} visible-md-block"></div>
            {% endif %}
            {% if loop.index is divisible by(4) %}
              {# place clearfix after every fourth occurence #}
              <div class="clearfix counter-{{ loop.index }} visible-lg-block"></div>
            {% endif %}
          {% endif %}

Please also see https://www.drupal.org/project/views_bootstrap/issues/3177126#comment-13...

@zenimagine yes the full file is below.

Also in the Views UI under 'Settings' (Bootstrap Grid) the 'Base number of columns' should be set to either '12' or 'all' if available.

{#
/**
 * @file views-bootstrap-grid.html.twig
 * Default simple view template to display Bootstrap Grids.
 *
 *
 * - columns: Contains rows grouped by columns.
 * - rows: Contains a nested array of rows. Each row contains an array of
 *   columns.
 * - column_type: Contains a number (default Bootstrap grid system column type).
 *
 * @ingroup views_templates
 */
#}
{%
  set classes = [
    'views-view-grid',
    options.alignment,
  ]
%}
{%
  set row_classes = [
    'row',
  ]
%}
{%
  set col_classes = [
  'col',
  col_xs,
  col_sm,
  col_md,
  col_lg,
  ]
%}
{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
<div id="{{ id }}" {{ attributes.addClass(classes) }}>
  {% if options.alignment  == 'horizontal' %}
    {% for row in items %}
      <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
        {% for column in row.content %}
          <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
            {{ column.content }}
          </div>

          
          {# xs:1c, s:2c, m:2c, l:2 #}

          {% if (col_xs == "col-xs-12") and (col_sm == "col-sm-6") and (col_md == "col-md-6") and (col_lg == "col-lg-6") %}
            {% if loop.index is divisible by(2) %}
              {# place clearfix after every second occurence #}
              <div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
            {% endif %}
          {% endif %}


          {# xs:1c, s:2c, m:2c, l:3c #}

          {% if (col_xs == "col-xs-12") and (col_sm == "col-sm-6") and (col_md == "col-md-6") and (col_lg == "col-lg-4") %}
            {% if loop.index is divisible by(2) %}
              {# place clearfix after every second occurence #}
              <div class="clearfix visible-sm-block visible-md-block"></div>
            {% endif %}
            {% if loop.index is divisible by(3) %}
              {# place clearfix after every third occurence #}
              <div class="clearfix visible-lg-block"></div>
            {% endif %}
          {% endif %}


          {# xs:1c, s:2c, m3c, l:3#}

          {% if (col_xs == "col-xs-12") and (col_sm == "col-sm-6") and (col_md == "col-md-4") and (col_lg == "col-lg-4") %}
            {% if loop.index is divisible by(2) %}
              {# place clearfix after every second occurence #}
              <div class="clearfix visible-sm-block"></div>
            {% endif %}
            {% if loop.index is divisible by(3) %}
              {# place clearfix after every third occurence #}
              <div class="clearfix visible-md-block visible-lg-block"></div>
            {% endif %}
          {% endif %}


          {# xs:1c, s:2c, m3c, l:4c #}

          {% if (col_xs == "col-xs-12") and (col_sm == "col-sm-6") and (col_md == "col-md-4") and (col_lg == "col-lg-3") %}
            {% if loop.index is divisible by(2) %}
              {# place clearfix after every second occurence #}
              <div class="clearfix visible-sm-block"></div>
            {% endif %}
            {% if loop.index is divisible by(3) %}
              {# place clearfix after every third occurence #}
              <div class="clearfix visible-md-block"></div>
            {% endif %}
            {% if loop.index is divisible by(4) %}
              {# place clearfix after every fourth occurence #}
              <div class="clearfix visible-lg-block"></div>
            {% endif %}
          {% endif %}


          {# xs:1c, s:2c, m4c, l:4c #}

          {% if (col_xs == "col-xs-12") and (col_sm == "col-sm-6") and (col_md == "col-md-3") and (col_lg == "col-lg-3") %}
            {% if loop.index is divisible by(2) %}
              {# place clearfix after every second occurence #}
              <div class="clearfix visible-sm-block"></div>
            {% endif %}
            {% if loop.index is divisible by(4) %}
              {# place clearfix after every fourth occurence #}
              <div class="clearfix visible-md-block visible-lg-block"></div>
            {% endif %}
          {% endif %}


        {% endfor %}
      </div>
    {% endfor %}
  {% else %}
    <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
      {% for column in items %}
        <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
          {% for row in column.content %}
            {{ row.content }}
          {% endfor %}
        </div>
        {% if loop.index is divisible by (sizes.xs) %}
          <div class="clearfix visible-xs-block"></div>
        {% endif %}

        {% if loop.index is divisible by (sizes.sm) %}
          <div class="clearfix visible-sm-block"></div>
        {% endif %}

        {% if loop.index is divisible by (sizes.md) %}
          <div class="clearfix visible-md-block"></div>
        {% endif %}

        {% if loop.index is divisible by (sizes.lg) %}
          <div class="clearfix visible-lg-block"></div>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
</div>

@zenimagine, I've checked your page at https://www.s1biose.com/fr/article and for some reason the

aren't being output for some reason? I presume you've cleared the cache?

The dev version now has the “all” option and the alternate template (from #19) is available in the templates directory.

Hi @zenimagine,

Thanks for your screenshots. I had not realised but you have 2-columns for extra small devices. Sorry, I hadn't included this. Hence, you also need to add the following:

          {# xs:2c, s:2c, m3c, l:4c #}

          {% if (col_xs == "col-xs-6") and (col_sm == "col-sm-6") and (col_md == "col-md-4") and (col_lg == "col-lg-3") %}
            {% if loop.index is divisible by(2) %}
              {# place clearfix after every second occurence #}
              <div class="clearfix visible-xs-block visible-sm-block"></div>
            {% endif %}
            {% if loop.index is divisible by(3) %}
              {# place clearfix after every third occurence #}
              <div class="clearfix visible-md-block"></div>
            {% endif %}
            {% if loop.index is divisible by(4) %}
              {# place clearfix after every fourth occurence #}
              <div class="clearfix visible-lg-block"></div>
            {% endif %}
          {% endif %}

I hope this helps.

Hi @zenimagine,

Just to clarify your screenshots show your site currently has the following number of Bootstrap columns:

Extra small devices: 2-columns
Small devices: 2-columns
Medium devices: 3-columns
Large devices: 4-columns

However, additionally there is some extra CSS (nonstandard for Bootstrap 3) for devices equal or smaller than 480px to make just 1-column. The CSS code is similar to:

@media (max-width: 480px) {
  .col-xs-6, .col-480 {
    width: 100% !important;;
  }
}

I mention this because at first glance your site https://www.s1biose.com/fr/article appears to have 1-column for extra small devices.

I am concerned about what is happening here. If this template is being specified for this use case only, then it won't be good to include with the module. I don't know why the rows are not breaking properly. Looking at the site, it doesn't appear that any other CSS is causing the issue. I also don't know why it "worked" before when the changes have been around adding custom row and col classes to be added. There was one commit in history that removed the ability to set the default base columns and the default was set at 4. However, that happened between the 3.1 and 3.2 release and the functionality was returned and the default set to 12, which is the Bootstrap base.

Here is a basic alternate template:

{#
/**
 * @file views-bootstrap-grid.html.twig
 * Default simple view template to display Bootstrap Grids.
 *
 *
 * - columns: Contains rows grouped by columns.
 * - rows: Contains a nested array of rows. Each row contains an array of
 *   columns.
 * - column_type: Contains a number (default Bootstrap grid system column type).
 *
 * @ingroup views_templates
 */
#}
{%
  set classes = [
    'views-view-grid',
    options.alignment,
  ]
%}
{%
  set row_classes = [
    'row',
  ]
%}
{%
  set col_classes = [
  'col',
  col_xs,
  col_sm,
  col_md,
  col_lg,
  ]
%}
{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
<div id="{{ id }}" {{ attributes.addClass(classes) }}>
  {% if options.alignment  == 'horizontal' %}
    {% for row in items %}
      <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
        {% for column in row.content %}
          <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
            {{ column.content }}
          </div>
          {% if loop.index is divisible by (sizes.xs) %}
            <div class="clearfix visible-xs-block"></div>
          {% endif %}

          {% if loop.index is divisible by (sizes.sm) %}
            <div class="clearfix visible-sm-block"></div>
          {% endif %}

          {% if loop.index is divisible by (sizes.md) %}
            <div class="clearfix visible-md-block"></div>
          {% endif %}

          {% if loop.index is divisible by (sizes.lg) %}
            <div class="clearfix visible-lg-block"></div>
          {% endif %}
        {% endfor %}
      </div>
    {% endfor %}
  {% else %}
    <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
      {% for column in items %}
        <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
          {% for row in column.content %}
            {{ row.content }}
          {% endfor %}
        </div>
        {% if loop.index is divisible by (sizes.xs) %}
          <div class="clearfix visible-xs-block"></div>
        {% endif %}

        {% if loop.index is divisible by (sizes.sm) %}
          <div class="clearfix visible-sm-block"></div>
        {% endif %}

        {% if loop.index is divisible by (sizes.md) %}
          <div class="clearfix visible-md-block"></div>
        {% endif %}

        {% if loop.index is divisible by (sizes.lg) %}
          <div class="clearfix visible-lg-block"></div>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
</div>

Hmmm. Alright then. I’m going to take a different approach and play around with your code output manually and see if I can come up with the missing piece to this puzzle.

@shelane,

Many thanks - I replaced my template with yours above #29 and it's currently working very well. In the past I thought I'd encountered problems with lags and hence I'd come up with my own version.

@zenimagine, I think you may need to set the 'Base number of columns' to 12 for your page to work. At the moment, with the 'Base number of columns' set to '4' the loop.index is going from 1-4 within the first, second and third row which means the 'divisible by' logic doesn't get chance to work correctly.

For example, after the sixth loop the loop.index is back to 2 (not 6) so the 'clearfix-md' isn't being placed (as 2 isn't divisible by 3) but gets incorrectly placed on the next cycle when the index is '3' (7th loop).

That is fantastic. It's set as the alternate template in the new release.

So you updated to to 8.x-3.4. Are you using that alternate template in your theme? Those changes are not in the default template, but instructions for using the alternate template are in that template file.

If you need the "fix" immediate, copy the alternate template to your theme and rename it as the instructions say. I will not be able to make a code release for a while.

Since the alternate template was deemed good for all purposes, that is now the main template and the "alternate" has been removed.