[FIXED] How can I have my template display a list on two different div tags without having redundancies

Issue

I have a list from my Model but I want my template to display the list element in groups of 4 or half the total length of the list Example: let say i have 10 elements in my list i want 5 on the right size and 5 on the left side. Please see screenshot below.

This is how i want my page to look like:

But this is what i get:

This is my HTML file.

  <div class="section-title">
    <h2>Skills</h2>
    <p>hsjkhvdkdjhvjkdfnv kjdf, dfhvkhdnfvkjldf,xhvnkldsv.mckldfnv ,dfhxncjcshfxdjvhcnjsdnckndjvbc d,sxbc kjdjsxcbjdksbvc kjs,bhzscs,zhcnlksjhlnzcklsnzjcjsdzcjb ds
        cxdbjvcsdbzcjks,gdcbkjds,zbcn jkcdxbv,m dfxvchj bdxnvbjhdujxdnkck jdfvknc dfkjhvxjdknfxzjxvkc.
    </p>
  </div>
  

  {% for skill in skills_list%}  
 
  <div class="row skills-content">
   
    <div class="col-lg-6" data-aos="fade-up">
      <div class="progress">
        <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

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

views.py:

#### TEST
class TestView(generic.ListView):
   model = Skills
   template_name = 'portfolio_app/test.html'


########################URL.py
from django.urls import path
from portfolio_app.models import *
from . import views


urlpatterns = [
    path('',views.fact,name='index'),
    #path('index/',views.SkillView.as_view,name='index'),
    path('about/',views.about_me,name='about'),
    path('service/',views.ServiceView.as_view(),name='service'),
    path('resume/',views.ResumeView.as_view(),name='resume'),
    path('contact/',views.ContactView.as_view(),name='contact'),
    path('test/',views.TestView.as_view(),name='test'),

]

Solution

Use slice like this:

  <div class="row skills-content">
    <div class="col-lg-6" data-aos="fade-up">
      {% for skill in skills_list|slice:":5" %}   
        <div class="progress">
        <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
     {% endfor %}
   </div>
   <div class="col-lg-6" data-aos="fade-up">
     {% for skill in skills_list|slice:"5:" %}   
       <div class="progress">
        <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
       </div>
    {% endfor %}
   </div>
  </div>

To get rid of redundant div's create a separate template for skills and include that in you current template using include template tag like this:

skills.html:

<div class="progress">
   <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
     <div class="progress-bar-wrap">
       <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
     </div>
</div>

your current temple:

  <div class="row skills-content">
    <div class="col-lg-6" data-aos="fade-up">
     {% for skill in skills_list|slice:":5" %}
      {% include 'skills.html' with skill=skill %}
     {% endfor %}
   </div>
  </div>

similarly for second loop.

Answered By - Ahtisham