Answers.Body: <p>It wasn't a CSS issue. Lack of twig knowledge. Here is the final fix.</p>
  
  <pre><code>    {% case 'pageRelatedContent' %}
  {% set relatedContentBlocks = entry.memberCommunicationsPageContent.type('pageRelatedContent') %}
  {% if entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 1 %}
      {% set colSize = 12 %}
  {% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 2 %}
      {% set colSize = 6 %}
  {% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 3 %}
      {% set colSize = 4 %}
  {% endif %}
      {% set isFirst = not block.getPrev() or block.getPrev().type != 'pageRelatedContent' %}
          {% if isFirst %}
              &lt;div class="section-empty section-item"&gt;
                  &lt;div class="container content"&gt;
                      &lt;div class="row"&gt;
          {% endif %}
          {% set relatedBlockInfo = relatedContentBlocks|batch(colSize) %}
          {% for blocks in relatedBlockInfo %}
          &lt;div class="col-md-{{ colSize }}"&gt;
              &lt;div class="list-group accordion-list"&gt;
                  &lt;div class="list-group-item active-panel"&gt;
                      &lt;a href="#" class="active"&gt; {{ block.relatedContentTitle }}&lt;/a&gt;
                      &lt;div class="panel" style="display: block; height: 182px;"&gt;
                          &lt;div class="inner"&gt;
                              &lt;ul class="list-texts text-left"&gt;
                                  {% for row in block.relatedLinkInformation %}
                                  &lt;li&gt;&lt;a href="{{row.linkUrl }}"&gt;{{ row.linkTitle }}&lt;/a&gt;&lt;/li&gt;
                                  {% endfor %}
                              &lt;/ul&gt;  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          {% endfor %}
      {% set isLast = not block.getNext() or block.getNext().type !='pageRelatedContent' %}
          {% if isLast %}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          {% endif %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-31T18:24:27.233Z
Answers.LastActivityDate: 2018-08-31T18:24:27.233Z
Answers.UserDisplayName: Jason
Body: <p>I have a matrix with a block type call pageRelatedContent. A user can add multiple block to their entry. I am trying to put all the pageRelatedContent blocks in one div row. For this example, I have three pageRelatedContent blocks in this entry. My code is generating three separate rows. Its a coding thing that I am missing. Can someone please assist.</p>
  
  <p>Here is the rendered HTML:
  <a href="https://i.sstatic.net/moX7s.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/moX7s.png" alt="enter image description here"></a></p>
  
  <p>Here is the desired output:
  <a href="https://i.sstatic.net/XmZKa.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/XmZKa.png" alt="enter image description here"></a></p>
  
  <p>Here is my code. I can see that it is creating a row for every block, but I can't seem to figure out how to insert all the block in one row.</p>
  
  <pre><code>    {% case 'pageRelatedContent' %}
  {% set relatedContentBlocks = entry.memberCommunicationsPageContent.type('pageRelatedContent') %}
  {% if entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 1 %}
      {% set colSize = 12 %}
  {% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 2 %}
      {% set colSize = 6 %}
  {% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 3 %}
      {% set colSize = 4 %}
  {% endif %}
      &lt;div class="section-empty section-item"&gt;
          &lt;div class="container content"&gt;
              &lt;div class="row"&gt;
                  {% set relatedBlockInfo = relatedContentBlocks|batch(colSize) %}
                  {% for blocks in relatedBlockInfo %}
                  &lt;div class="col-md-{{ colSize }}"&gt;
                      &lt;div class="list-group accordion-list"&gt;
                          &lt;div class="list-group-item active-panel"&gt;
                              &lt;a href="#" class="active"&gt; {{ block.relatedContentTitle }}&lt;/a&gt;
                              &lt;div class="panel" style="display: block; height: 182px;"&gt;
                                  &lt;div class="inner"&gt;
                                      &lt;ul class="list-texts text-left"&gt;
                                          {% for row in block.relatedLinkInformation %}
                                          &lt;li&gt;&lt;a href="{{row.linkUrl }}"&gt;{{ row.linkTitle }}&lt;/a&gt;&lt;/li&gt;
                                          {% endfor %}
                                      &lt;/ul&gt;  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  {% endfor %}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the matrix information:
  <a href="https://i.sstatic.net/nf1kS.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/nf1kS.png" alt="enter image description here"></a></p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-08-31T17:44:23.067Z
Comments.Text: I'm voting to close this question as off-topic because it's not really a Craft question, this is a CSS question. `.col-md-{{ colSize }}` needs to be floated and have its width set to a third of the width of `.row`. Looking up info on CSS grids (maybe on Stack Overflow) will point you in the right direction.
Comments.UserDisplayName: Simon Kuran
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-08-31T17:49:57.303Z
Comments.Text: How is this a CSS issues. For every block, it is generating the case code. There has to be some for of twig code that will not rewrite the row everytime it runs through the case.
Comments.UserDisplayName: Jason
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-08-31T18:09:22.190Z
Comments.Text: Personally I'd adjust my CSS and HTML to change the layout. I find that cleaner. But you could check what the next matrix block is and conditionally add HTML. Something like this: https://craftcms.stackexchange.com/questions/1745/identify-immediate-siblings-block-type-in-matrix/1747#1747
Comments.UserDisplayName: Simon Kuran
Tags: <craft3><matrix>
Title: Inserting Multiple Block Types in one div row
ThreadText: # Inserting Multiple Block Types in one div row
  
  (Asked by: username_0 on 2018-08-31)
  
  I have a matrix with a block type call pageRelatedContent. A user can add multiple block to their entry. I am trying to put all the pageRelatedContent blocks in one div row. For this example, I have three pageRelatedContent blocks in this entry. My code is generating three separate rows. Its a coding thing that I am missing. Can someone please assist.
  
  Here is the rendered HTML:
  [![enter image description here](https://i.sstatic.net/moX7s.png)](https://i.sstatic.net/moX7s.png)
  
  Here is the desired output:
  [![enter image description here](https://i.sstatic.net/XmZKa.png)](https://i.sstatic.net/XmZKa.png)
  
  Here is my code. I can see that it is creating a row for every block, but I can't seem to figure out how to insert all the block in one row.
  
  ```
      {% case 'pageRelatedContent' %}
  {% set relatedContentBlocks = entry.memberCommunicationsPageContent.type('pageRelatedContent') %}
  {% if entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 1 %}
      {% set colSize = 12 %}
  {% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 2 %}
      {% set colSize = 6 %}
  {% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 3 %}
      {% set colSize = 4 %}
  {% endif %}
      <div class="section-empty section-item">
          <div class="container content">
              <div class="row">
                  {% set relatedBlockInfo = relatedContentBlocks|batch(colSize) %}
                  {% for blocks in relatedBlockInfo %}
                  <div class="col-md-{{ colSize }}">
                      <div class="list-group accordion-list">
                          <div class="list-group-item active-panel">
                              <a href="#" class="active"> {{ block.relatedContentTitle }}</a>
                              <div class="panel" style="display: block; height: 182px;">
                                  <div class="inner">
                                      <ul class="list-texts text-left">
                                          {% for row in block.relatedLinkInformation %}
                                          <li><a href="{{row.linkUrl }}">{{ row.linkTitle }}</a></li>
                                          {% endfor %}
                                      </ul>  
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  {% endfor %}
              </div>
          </div>
      </div>
  
  ```
  
  Here is the matrix information:
  [![enter image description here](https://i.sstatic.net/nf1kS.png)](https://i.sstatic.net/nf1kS.png)
  
  **Tags:** craft3, matrix
  
  > **Comments:**
  > **username_1**: I'm voting to close this question as off-topic because it's not really a Craft question, this is a CSS question. `.col-md-{{ colSize }}` needs to be floated and have its width set to a third of the width of `.row`. Looking up info on CSS grids (maybe on Stack Overflow) will point you in the right direction.  
  > **username_0**: How is this a CSS issues. For every block, it is generating the case code. There has to be some for of twig code that will not rewrite the row everytime it runs through the case.  
  > **username_1**: Personally I'd adjust my CSS and HTML to change the layout. I find that cleaner. But you could check what the next matrix block is and conditionally add HTML. Something like this: https://craftcms.stackexchange.com/questions/1745/identify-immediate-siblings-block-type-in-matrix/1747#1747  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2018-08-31. Score: 2
  
  It wasn't a CSS issue. Lack of twig knowledge. Here is the final fix.
  
  ```
      {% case 'pageRelatedContent' %}
  {% set relatedContentBlocks = entry.memberCommunicationsPageContent.type('pageRelatedContent') %}
  {% if entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 1 %}
      {% set colSize = 12 %}
  {% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 2 %}
      {% set colSize = 6 %}
  {% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 3 %}
      {% set colSize = 4 %}
  {% endif %}
      {% set isFirst = not block.getPrev() or block.getPrev().type != 'pageRelatedContent' %}
          {% if isFirst %}
              <div class="section-empty section-item">
                  <div class="container content">
                      <div class="row">
          {% endif %}
          {% set relatedBlockInfo = relatedContentBlocks|batch(colSize) %}
          {% for blocks in relatedBlockInfo %}
          <div class="col-md-{{ colSize }}">
              <div class="list-group accordion-list">
                  <div class="list-group-item active-panel">
                      <a href="#" class="active"> {{ block.relatedContentTitle }}</a>
                      <div class="panel" style="display: block; height: 182px;">
                          <div class="inner">
                              <ul class="list-texts text-left">
                                  {% for row in block.relatedLinkInformation %}
                                  <li><a href="{{row.linkUrl }}">{{ row.linkTitle }}</a></li>
                                  {% endfor %}
                              </ul>  
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          {% endfor %}
      {% set isLast = not block.getNext() or block.getNext().type !='pageRelatedContent' %}
          {% if isLast %}
                  </div>
              </div>
          </div>
          {% endif %}
  
  ```
  
  
  ---
  
  