I am trying to show a list of data based on tabs. So far I was able of take the data and show it. The problem is the html part. Some parts of the html should not repeat but they have to be at least once...
[![<body class="bootstrap" >
<!--#INCLUDE VIRTUAL="TopNavInclude.asp" -->
<div class="container">
<div class="col-md-12">
<div class="panel panel-default panel-fade">
<div class="panel-heading">
<span class="panel-title">
<div class="pull-left">
<ul class="nav nav-tabs">
{% block content %}
{% for s in data_seasons %}
{% if s == 1 %}
<li class="active"></i> Temporada {{s}}</li>
{% else %}
<li></i> Temporada {{s}}</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="btn-group pull-right">
<div class="btn-group">
<a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-cog"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action 1</li>
<li>Action 2</li>
<li class="divider"></li>
<li>Another Action</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</span>
</div>
<div class="panel-body">
<div class="tab-content">
{% for s in data_seasons %}
{% for ep in data_ep %}
{% if s == ep.tve_season %}
{% if s == 1 %}
<div class="tab-pane fade in active" id="tab{{s}}">
<h3>Episodios</h3>
<FORM ACTION="" METHOD="post">
<INPUT TYPE="hidden" NAME="FormName" VALUE="PrintLetters">
<TABLE class="table table-striped">
<THEAD>
<TR><TH>Selecionar</TH><TH style="text-align:left">Nome do Episodio</TH><TH style="text-align:left">Duracao</TH><TH>Data/Horario</TH><TH>Sumario</TH></TR>
</THEAD>
<TBODY>
<TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>{{ep.tve_name}}</TD><TD>{{ep.tve_runtime}}</TD><TD>{{ep.tve_schedule}}</TD><TD>...</TD></TR>
</TBODY>
</TABLE>
</FORM>
</div>
</div>
{% else %}
<div class="tab-pane fade" id="tab{{s}}">sss </div>
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
{% endblock %}][1]][1]
Original template:
http://bootsnipp.com/snippets/OMX7O
This the div part should only run once, the for it should be only for the variables:{{s}} and {{ep...}}
{% if s == ep.tve_season %}
{% if s == 1 %}
<!--This <div class="tab-pane fade in active" id="tab{{s}}">
<h3>Episodios</h3>
<FORM ACTION="" METHOD="post">
<INPUT TYPE="hidden" NAME="FormName" VALUE="PrintLetters">
<TABLE class="table table-striped">
<THEAD>
<TR><TH>Selecionar</TH><TH style="text-align:left">Nome do Episodio</TH><TH style="text-align:left">Duracao</TH><TH>Data/Horario</TH><TH>Sumario</TH></TR>
</THEAD>
<TBODY>
<TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>{{ep.tve_name}}</TD><TD>{{ep.tve_runtime}}</TD><TD>{{ep.tve_schedule}}</TD><TD>...</TD></TR>
</TBODY>
</TABLE>
</FORM>
</div> Until this-->
</div>
Look at the variables available in the for loop. There is one called forloop.first which may be a better choice than checking if s = 1.
Documentation
https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#for
There is a similar discussion at:
Django {% if forloop.first %} question
Can you show what your desired output looks like?
Related
I have a project where I have a paginated nav-tab with bootstrap.
The problem is that, anytime I refresh the page or I change the page with my pagination buttons, the active element is always the element n° 1 of the list.
This is probably due to the fact that I need to activate it upon opening the page with an if condition within the forloop. Let me post some code to be more clear
template
<input type="hidden" id="quizProfileId" value="{{pk}}">
<div class="card">
<div class="card-body">
<h4 class="card-title ms-3">New {{quiz_attempt.question.question_subject}} Quiz</h4>
<div class="row">
<div class="col-md-9">
<div class="tab-content text-muted mt-4 mt-md-0" id="v-pills-tabContent">
{% for quiz in quizzes %}
<div class="tab-pane {% if forloop.counter == 1 %}active{% endif %} ms-3 questionsObj" id="question{{quiz.question_draft.question.id}}" value="{{quiz.question_draft.question.id}}">
<h5 class="text-dark">{{quiz.question_draft.question.text}}</h5>
<div class="list-group mt-3">
{% for image in quiz.question_draft.question.questionimage_set.all %}
<a href="{{image.image.url}}" target="_blank">
<img src="{{image.image.url}}" alt="" width="100px" height="100px">
</a>
<br>
{% endfor %}
{% for answer in quiz.question_draft.answerdraft_set.all|shuffle %}
<a href="#"
data-pk="{{quiz.question_draft.question.id}}"
id="answer{{answer.answer.id}}" data-answerId="{{answer.answer.id}}"
class="
list-group-item answer question{{quiz.question_draft.question.id}} list-group-item-action
{% if quiz.question_draft.is_answered == True and answer.answer.is_correct == True %}bg-success{% endif %}
{% if answer.is_answered == True and answer.is_correct == True %}bg-success disabled
{% elif answer.is_answered == True and answer.is_correct == False %}bg-danger disabled
{% elif quiz.question_draft.is_answered == True %} disabled
{% endif %}
">
<b>{{forloop.counter0|to_char}}</b>    {{answer.answer.text}}
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="form-group mt-3 mb-3">
{% if quiz_profile.is_completed != True %}
<form id="finishQuiz" action="{% url 'quiz:finish_test' pk=pk %}" method="get">
<button type="submit" class="btn btn-sm btn-success" id="finishButton" >Finish Test</button>
Save
Cancel Test
</form>
{% else %}
Quiz Report
{% endif %}
</div>
</div>
<div class="row">
<div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
{% for quiz in pages %}
<a class="btn btn-sm btn-outline-secondary custom m-1
{% for answer in quiz.question_draft.answerdraft_set.all %}
{% if answer.is_answered == True and answer.is_correct == True %}bg-success{% endif %}
{% endfor %}
{% if quiz.question_draft.is_correct == False %}bg-danger{% endif %}
{% if forloop.counter == 1 %}active{% endif %} "
id="questionButton{{quiz.question_draft.question.id}}"
data-bs-toggle="pill" href="#question{{quiz.question_draft.question.id}}">{{ pages.start_index|add:forloop.counter0 }}
</a>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-9">
</div>
<div class="col-md-3">
<ul class="pagination">
{% if pages.has_previous %}
<li class="page-item">
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ pages.previous_page_number }}"><i class="fas fa-angle-double-left"></i></a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
</li>
{% endif %}
{% for i in paginator.page_range %}
<li class="page-item {% if pages.number == i%} active {% endif %} %}" >
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ i }}" >{{i}}</a>
</li>
{% endfor %}
{% if pages.has_next %}
<li class="page-item">
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ pages.next_page_number }}" ><i class="fas fa-angle-double-right"></i></a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
I think that in particular {% if forloop.counter == 1 %}active{% endif %} is the main reason of this problem. On the other side, I don't know how to give the class active only to the first element when I load the page for the first time.
And in the same time, I would like to load the first element of the second page, when I load the second page and so on.
I am very beginner at django, And fall onto this error MultiValueDictKeyError, I've got this error earlier, And I solved it after adding the name tag to HTML file, but this time I am not able to figure it out. please help me fix this error
views.py
from django.shortcuts import render
from .models import Post
# Create your views here.
def main(request):
return render(request, "blog/index.html", {"Posts":Post.objects.all()})
def viewpost(request, pk):
return render(request, "blog/viewpost.html", {"Posts":Post.objects.get(id = pk)})
def search(request):
if request.method == "GET":
search = request.GET["search"]
for post in Post.objects.all():
if search in post.Title:
return render(request, "blog/search.html")
else:
return render(request, "blog/search.html", {
"message": "Not Found"
})
Index.html I am sorry this file is quite too big but its on the third block. I have commented out that block.
{% extends 'blog/layout.html' %}
{% load static %}
{% block body %}
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<h1 class="my-4">Page Heading
<small>Secondary Text</small>
</h1>
<!-- Blog Post -->
{% for post in Posts %}
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">{{ post.Title }}</h2>
<p class="card-text">{{ post.Description }}</p>
Read More →
</div>
<div class="card-footer text-muted">
Posted on {{ post.Date }} by
{{ post.Author }}
</div>
</div>
{% endfor %}
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
**<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<form action="{% url 'search' %}" method="GET">
{% csrf_token %}
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." name="search">
<span class="input-group-append">
<button class="btn btn-secondary" type="button" >Go!</button>
</span>
</div>
</form>**
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
{% endblock %}
urls.py
from django.urls import path, include
from . import views
urlpatterns = [
path('',views.main, name = 'main'),
path('viewpost/<int:pk>/', views.viewpost, name = 'viewpost'),
path('search/', views.search, name = 'search'),
]
search.html
{% extends 'blog/layout.html' %}
{% load static %}
{% block body %}
<div class="card" style="width: 70vw; margin-left: auto; margin-right: auto; margin-top: 20px; ;">
<div class="card-body">
<h2 class="card-title">Search Results:</h2>
{% for post in posts %}
<h3 class="card-subtitle" style="margin-top: 30px;"><a href="#}" >{{ post.title }}</a></h3>
<p class="card-text" style="margin-left: 1px;">{{ post.description }}</p>
<hr>
{% endfor %}
</div>
</div>
{% endblock %}
You need to change your views and template like this.
Change button type tosubmit and you don't need csrf token in the GET request.
<form action="{% url 'search' %}" method="GET">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." name="search">
<span class="input-group-append">
<button class="btn btn-secondary" type="submit">Go</button>
</span>
</div>
</form>**
Now in the views
First get the search query parameter then filter all the posts containing that query using __icontains and return the results to the template in a context
def search(request):
search = request.GET.get ('search', '')
posts = Post.objects.filter(title__icontains=search)
return render(request, "blog/search.html", {'posts':posts})
I have a dropdown menu using boostrap card that look like this :
I set z-index property to 1000 for the card div, position absolute. This card is in a horizontal menu at the top of my page with a position fixed. My body have a relative position and my div with the content of my page have a relative position too.
This is the render of my page :
And there is my HTML code :
<body>
<div id="body">
<div class="header">
<div class="row">
<div class="col-1 col-sm-1">
<button class="hamburger">☰</button>
</div>
<!--<div class="col-1 col-sm-1 col-lg-1 offset-lg-2" id="spanSearch">
<h4><span class="badge indigo hide">{# block badge_research %}{% endblock #}</span></h4>
</div>
<div class="col-2 offset-2 col-sm-2 offset-sm-3 col-md-2 offset-md-3 col-lg-2 offset-lg-3">
<div class="search d-inline pull-right">
</i>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
</div>
!-->
<div class="col-7 col-sm-6 col-md-6 col-lg-6 offset-lg-5">
<ul class="list-inline pull-right downMenu inline">
<li class="nav-item dropdown btn-group">
<a class="nav-link" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false"> {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} <img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="50" height="50"> {% else %} {{ 'acreat.mailing.nav.account'|trans }} {% endif %}</a>
<div class="dropdown-menu top dropdown" no-escape aria-labelledby="dropdownMenu1">
<div class="card">
<div class="card-block">
<div class="container-fuild">
<div class="row">
<div class="col-3">
<img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="200" height="112">
</div>
<div class="col-9">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{{ 'acreat.mailing.nav.myaccount'|trans }}
{{ 'acreat.mailing.nav.changepassword'|trans }}
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
{{'acreat.mailing.admin.impersonalisation'|trans}}
{% endif %}
</div>
</div>
<div class="card-footer text-center">
{{ 'acreat.mailing.nav.logout'|trans }}
{% else %}
{{ 'acreat.mailing.nav.login'|trans }}
</div>
{% endif %}
</div>
</div>
</div>
</li>
</ul>
<div class="search d-inline inline pull-right">
</i>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags inline" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
<div class="inline pull-right spanSearch">
<h5>{% block badge_research %}{% endblock %}</h5>
</div>
</div>
</div>
</div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{% block navbar %}
<div class="sidebar blue-grey darken-4 no-escape" id="navbar">
<div class="user-box no-escape">
<a class="logo no-escape" href="/" title="Retour à l'accueil">
<img src ="https://www.acreat.com/sites/acreat.com/themes/acreat/images/logo.png" class="img-fluid text-center no-escape"></img>
</a>
<h5 class="text-center">{{ 'acreat.mailing.title.website'|trans }}</h5>
</div>
<div class="list-group panel no-escape" aria-expanded="true">
<i class="fa fa-dashboard margin-right"></i> <span>{{ 'acreat.mailing.nav.dashboard'|trans }}</span>
<i class="fa fa-tasks margin-right"></i><span>{{ 'acreat.mailing.nav.inbox'|trans }}<i class="fa fa-angle-down" id="wrapperArrow"></i></span>
<div class="collapse show no-escape" id="menu0">
<a href="/message/template/{{app.user.id}}" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.addmessage'|trans }}</span>
</a>
{%- set numberNotSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status !='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).andWhere("u.status !='SUBMITTED'").getQuery().getResult() -%}
<a href="/message/viewNotSent" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.messagenotsent'|trans }}
<span class="badge badge-primary badge-pill align-right">{{ numberNotSent[0][1] }}</span>
</span>
</a>
{%- set numberSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status ='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).getQuery().getResult() -%}
<a href="/message/viewSent" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.messagesent'|trans }}
<span class="badge badge-primary badge-pill align-right">{{ numberSent[0][1] }}</span>
</span>
</a>
<a href="/message/viewDraft" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.draft'|trans }}</span>
</a>
</div>
<i class="fa fa-list margin-right"></i> <span>{{ 'acreat.mailing.nav.mailinglist'|trans }}</span>
</i> <span>{{ 'acreat.mailing.nav.member'|trans }}</span>
{%- if is_granted('ROLE_ADMIN') -%}
<div id="adminBottom" class="no-escape">
<i class="fa fa-envelope margin-right"></i> <span >{{ 'acreat.mailing.nav.administration'|trans }}<i class="fa fa-angle-down" id="wrapperArrow2"></i></span>
<div class="collapse show no-escape" id="menu4">
{{ 'acreat.mailing.nav.administrationlist'|trans }}
{{ 'acreat.mailing.nav.administrationaccount'|trans }}
{{ 'acreat.mailing.nav.administrationnewsletter'|trans }}
{{ 'acreat.mailing.nav.administrationparameters'|trans }}
</div>
</div>
{%- endif -%}
</div>
</div>
{% endblock navbar %}
{%- endif -%}
<div id="content">
{% block body %}
{%- if app.user == false -%}
<main class="col-12 col-md-12 col-xs-12 col-lg-12 col-xl-12">
{%- else -%}
<main class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
{%- endif -%}
{% block flashmessage %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('fail') %}
<div class="alert alert-danger" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% endblock flashmessage %}
{% block main %}
{%- block breadcrumb -%}{%- endblock -%}
<section></section>
{%- block confirmation -%}{%- endblock -%}
{% endblock main %}
{% block fos_user_content %}
{% endblock fos_user_content%}
</main>
{% endblock body %}
</div>
</div>
</body>
Thanks for the help
You should set z-index for fixed parent element, not for card
Django with Bootstrap 3
I am working on a dashboard view for an FAQ system. I have set up the articles to be grouped by section. The section names are the headers in a list-group that when clicked will expand another list-group containing all the articles related to that group.
The issue that I am having is that I would like to set up the collapse to work like an accordion. I have followed bootstrap 3’s guide to accomplish this but when I click a new section open none of the prior open sections collapse close. I have exhausted other guides but the code looks correct yet the accordion functionality is not working.
My code:
{% block content %}
<div class="iron-faq">
<div class="container">
<div class="col-md-6">
<h3>Sections</h3>
<div class="list-group" id="accordion" aria-multiselectable="true">
{% regroup articles by section as section_list %}
{% for section in section_list %}
<a href="#section-{{ section.grouper.id }}"
class="list-group-item list-header"
data-toggle="collapse"
data-parent="#accordion"
data-target="#section-{{ section.grouper.id }}"
aria-controls="section-{{ section.grouper.id }}">
<i class="fa fa-bars"></i> {{ section.grouper }}
<span class="badge pull-right">{{ section.grouper.article_count }}</span>
</a>
<div class="panel-collapse collapse" id="section-{{ section.grouper.id }}">
{% for article in section.list %}
<a href="{{ article.get_absolute_url }}" class="list-group-item">
{{ article.title }}
</a>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<div class="col-md-6">
<h3>Useful Articles</h3>
<div class="list-group">
<div class="favorites">
{% for favorite in favorites %}
<a href="{{ favorite.get_absolute_url }}" class="list-group-item">
<h5 class="list-group-item-heading">{{ favorite.title }}</h5>
<p class="list-group-item-text">{{ favorite.section.name }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
You have to wrap each section with:
<div class="panel"></div>
So your html would look like the following:
{% block content %}
<div class="iron-faq">
<div class="container">
<div class="col-md-6">
<h3>Sections</h3>
<div class="list-group" id="accordion" aria-multiselectable="true">
{% regroup articles by section as section_list %}
{% for section in section_list %}
<div class="panel">
<a href="#section-{{ section.grouper.id }}"
class="list-group-item list-header"
data-toggle="collapse"
data-parent="#accordion"
data-target="#section-{{ section.grouper.id }}"
aria-controls="section-{{ section.grouper.id }}">
<i class="fa fa-bars"></i> {{ section.grouper }}
<span class="badge pull-right">{{ section.grouper.article_count }}</span>
</a>
<div class="panel-collapse collapse" id="section-{{ section.grouper.id }}">
{% for article in section.list %}
<a href="{{ article.get_absolute_url }}" class="list-group-item">
{{ article.title }}
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-6">
<h3>Useful Articles</h3>
<div class="list-group">
<div class="favorites">
{% for favorite in favorites %}
<a href="{{ favorite.get_absolute_url }}" class="list-group-item">
<h5 class="list-group-item-heading">{{ favorite.title }}</h5>
<p class="list-group-item-text">{{ favorite.section.name }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Hope this helps!
I'm having a very hard time trying to solve this. I got a back-end working but problem is html and css. I'm trying to make it like this here;
picture on the far left, user name on top and text below the user name and next to picture which is also the style youtube use. Here's my try.
as you can see when text isn't too long it kinda works but when it gets big it alters the form. Also as for the reply comment, the whole thing is a mess. I moved things around but still won't do the job.
Here's my full code(I'm using django template language here as well) and you can see simplified version here https://jsfiddle.net/n9h7gy54/ (it might be better to see the one here because my full code is very messy)
<table class='table'>
{% for comment in comments %}
<tr>
<td>
<div class="wholeComment" style="width:100%; margin:auto; font-size:14px;">
<div class="profileImage" style="float:left;">
<img src="{{ comment.user.get_mugshot_url }}" height='48' width='48' />
</div>
<div class="comment_header" style="float:left;">
<div class="commentInfo">
{{ comment.user.user }}| <small>{{ comment.timestamp|timesince }} </small>
</div>
<div class="aboutComment">
<span style="margin:5px; word-break: break-all;">
{{ comment.get_comment }}</span>
</div>
<div class="comment_bottom" style="padding:3px;">
{% if user.is_authenticated %}
<div class="make_reply">
<a href='#' class='reply_btn'>reply</a>
<div class='reply_comment'>
<form method="POST" action='{% url "comment_create" %}'>{% csrf_token %}
<input type='hidden' name='post_id' id='post_id' value='{% url "comment_create" %}'/>
<input type='hidden' name='origin_path' id='origin_path' value='{{ comment.get_origin }}'/>
<input type='hidden' name='parent_id' id='parent_id' value='{{ comment.id }}' />
{% crispy comment_form comment_form.helper %}
</form>
</div>
</div>
{% endif %}
<div class="replyInfo">
{% if not comment.is_child %}
<div class="wholeReply">
{% if comment.comment_count %}
<a href='#' class='replies'>
view{{comment.comment_count}}reply</a>
{% endif %}
<div class="got_replies">
<ul style="list-style-type: none;">
{% for child in comment.get_children %}
<hr>
<li>
<div style="float:left;">
<img src="{{ child.user.get_mugshot_url }}" height='48' width='48'/> {{ child.user.user }}
</div>
<div style="word-break: break-all; ">
{{ child.get_comment }}</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</td></tr>
{% endfor %}
</table>
If I understand you correctly, you're looking for
<div class="row">
<div class="col-xs-1">
<img src="{{ comment.user.get_mugshot_url }}"/>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<p>
{{ comment.user.user }}
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<small>{{ comment.timestamp|timesince }} </small>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span>{{ comment.get_comment }}</span>
</div>
</div>
{% for child in comment.get_children %}
{% include 'commentrow.html' comment=child %}
{% endfor %}
</div>
</div>
You can save this snippet as a template called commentrow.html and it will work recursively for children, including it in your template the same way
{% for comment in comments %}
{% include 'commentrow.html' comment=comment %}
{% endfor %}
JSFiddle
The important part is the col-xs tags, since this will mean the columns don't wrap regardless of screensize.