So, we have made a directory named "webapps" to serve our web apps and we have also included the route to serve a homepage with a navbar. But that's not how our final product looks like. We want something like this:

So, let's start our journey. We start by modifying the templates > general_pages > homepage.html file.

{% extends "shared/base.html" %}


{% block title %}
  <title>Job Board</title>
{% endblock %}

{% block content %}
  <div class="container">
  <div class="row">
    <div class="col">
      <h1 class="display-5">Find Jobs..</h1>
    </div>
  </div>
  <div class="row">
      {% for job in jobs %}
        <div class="col-lg-4 col-md-3 col-sm-10 mr-auto">
          {% with obj=job %}
      		{% include "components/cards.html" %}
    	  {% endwith %}

          {% if loop.index %3 %}
            </div>
          {% else %}
            </div></div><br><div class="row">
          {% endif %}
      {% endfor %}
  </div>
</div>
{% endblock %}

• We are using Jinja For-Loop, Basically, we are iterating over the list of jobs that the template receives from the backend and display each job in one single card.
• We are also making sure, that we display 3 cards in a row. The moment for loop completes 3 iterations, we are creating a new row and placing cards in the new row.

Now, we need a new file, templates > components > cards.html file. This is going to be a bootstrap card.

<div class="card shadow p-3 mb-2 bg-body rounded" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">{{obj.title}}</h5>
    <p class="card-text">Company : {{obj.company}}</p>
    <p class="card-text">Company URL : <a href="{{obj.company_url}}">{{obj.company_url}}</a></p>
    <p class="card-text">Description : {{obj.description[:60]}}</p>
    <a href="/jobs/detail/{{obj.id}}" class="btn btn-primary">Read more</a>
  </div>
</div>

All done..🥵 Time to test our work at http://127.0.0.1:8000/
Hurrey, It works!