Ad

How To Use Bootstrap Div In Loop ..?

- 1 answer

I have tried a lot to bring my blog to post 3 in a row using bootstrap in Shopify. But I'm unable do that because of for loop.

Now only one blog post is coming in one row blog url. I want to display 3 blogs in a row. Here is my code:

<div class="row">
 <div class="col-xs-12 main-col">
   <div class="content-blog">
    <ul class="list-blog" style="list-style: none;">
     {% for article in blog.articles %}
     <li class="myownstyleclass" style=" border: 2px solid #D3D3D3; padding-left:15px;"> 
       <h3><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ article.url }}">{{ article.title }}</a></h3></li>
     {% endfor %}
  </ul>
  </div>
</div>
</div>

I tried with one more logic:

<ul class="list-blog" style="list-style: none;">
{% for article in blog.articles %}
 <div class="row">
  <div class="col-xs-12 main-col">
   <div class="content-blog">
     <li class="myownstyleclass" style=" border: 2px solid #D3D3D3; padding-left:15px;"> 
      <h3><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ article.url }}">{{ article.title }}</a></h3></li>
   </div>
  </div>
 </div>
{% endfor %}
</ul>

Nothing is helping. Any help? I am very new to this.

Ad

Answer

<ul class="list-blog" style="list-style: none;">
   <div class="row">
     {% for article in blog.articles %}
    <div class="col-xs-4 main-col">
       <div class="content-blog">
 <li class="myownstyleclass" style=" border: 2px solid #D3D3D3; padding-left:15px;"> 
   <h3><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ article.url }}">{{ article.title }}</a></h3></li>

          </div>
         </div>
     {% endfor %}
        </div>
 </ul>
Ad
source: stackoverflow.com
Ad