pythondjangopython-2.7django-templatesdjango-bootstrap3

Enclosing For Loop in Django around bootstrap html tags

Am so new to Python on Django. I like to wrap my Bootstrap HTML Tags around Django For..Loop handles such that I have my details from the database rendered in Columns. However, it didn't happen from what I have done. The second column actually got messed up. The columns are suppose to standing side by side.

Note that if its only bootstrap tags, it renders very well the way its suppose to.

Here is the pictorial view of the mess

enter image description here

Below is my Python Django code:

templates/app/home.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Mentoring Services</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Mentoring Services">
        <meta name="keywords" content="">
        <meta name="author" content="Myrioi Solutions">
        <!-- FAVICON -->
        <link rel="shortcut icon" href="images/favicon.ico">
        <link rel="stylesheet" href="static/css/base.css">
        {# Load the tag library #}
        {% load bootstrap3 %}

        {# Load CSS and JavaScript #}
        {% bootstrap_css %}
        {% bootstrap_javascript %}

        {# Display django.contrib.messages as Bootstrap alerts #}
        {% bootstrap_messages %}
    </head>
<body>

<div class="intro" data-stellar-background-ratio="0.55" style="background-position: 50% 50%;">
  <div class="container">
      <div>
          <h4>Get mentored and be successful</h4>
      </div>
      <div class="#">
          <h1 style="transition: none; text-align: inherit; line-height: 62px; border-width: 0px; margin: 14px 0px 9px; padding: 0px; letter-spacing: 0px; font-size: 55px; color: black">
            Mentoring Directory
          </h1>
          <p class="lead">The most complete solution<br>
             for online mentoring directories
          </p>
     </div>
  </div>
</div>


<div class="home-directory">
            <div class="container">
                <div class="section-head text-center">
                    <h3>Best rated Mentors</h3>
                    <p class="lead">Explore some of our best mentors around your place and connect with them.</p>
                </div>
                <div class="row">
                 {% for item in mentors %}
                    <div class="col-md-4 col-sm-6 col-sm-offset-3 col-md-offset-0">
                        <div class="listing">
                            <div class="listing-img bg-image" data-image-src="{{ item.image }}" style="background: url(&quot;images/home/3.jpg&quot;) center center / cover no-repeat;">
                                <div class="li-overlay">
                                    <div class="li-overlay-inner">
                                        <a href="#" class="mail"></a>
                                        <a href="#" class="menu"></a>
                                        <a href="#" class="link"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="listing-info">
                                <h4 class="li-name"><a href="#">{{ item.first_name }} {{ item.last_name }}</a></h4>
                                <ul class="list-icon">
                                    <li> <i class="pe-7s-map-marker"></i> {{ item.location }}</li>
                                    <li> <i class="pe-7s-call"></i> {{ item.phone_number }}</li>
                                    <li> <i class="pe-7s-mail"></i> <a href="mailto:{{ item.email }}">{{ item.email }}</a> </li>
                                </ul>
                            </div>
                        </div>
                    {% endfor %}
                    </div>
                </div>
            </div>
        </div>
</body>

</html>

view.py

from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render
from django.views import View
from .models import *
from .models import Mentor


# Create your views here.


class HomeView(View):
    # @staticmethod
    def get(self, request, *args, **kwargs):
        mentors = Mentor.objects.all()
        return render(request, "mentoring_application/home.html", {"mentors": mentors})

Note: I am using django-bootstrap3 package/gem to integrate my Django App with Bootstrap3 and I do not know what am doing wrong.

Solution

  • I think the problem is in the nesting of the div elements and endfor.

    The loop ends without matching all <div> with a </div>. Move it down one level from

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

    to

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