enter image description here

May I know how to create multiple loop for this HTML code in WordPress?

<div class="row">
 <div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;•&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;•&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;•&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;•&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
</div>

<div class="row">
 <div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;•&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;•&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;•&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;•&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
</div>

And the row keep on going based on the sum of post that we have. Hopefully it will appear like this:

Please advise. thanks!

Read more here: How to create bootstrap grid loop?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: