CODEWITHSUNDEEP
htmlcssdjangotwitter-bootstrap-3
Yax
Yax

Reputation: 2189

Bootstrap 3 Displays Content Outside col-md-6 in Django Template

Sorry this question is unavoidably kind of long.

I have basetemplate.html which other files extend.

basetemplate.html:

<!DOCTYPE html>
<html lang="en">
    <head>....</head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top">...</nav>
        <div class="container">
            <div class="row">                   
                <div class="col-md-3 hidden-xs hidden-sm">
                {% block profile %}
                    <p>User details here...</p>
                {% endblock %}
                </div>

                <div class = "col-md-6">
                {% block mainBody %}            
                {% endblock %}
                </div>

                <div class = "col-md-3 hidden-xs hidden-sm">
                {% block others %}  
                    <p>Others here...</p>
                {% endblock %}
                </div>
            </div>
        </div>
    </body>
</html>

I now have home.html extending basetemplate.html:

home.html:

{% extends "mysite/base.html" %}
{% block mainBody %}
    {% include 'mysite/mainbody.html' %}
{% endblock %}

And mainbody.html contains:

{% for article in articles reversed %}      
    <div class="article-wrapper">
        <div class="article-content">
            <p>{{ article.content }}</p>
        </div>
    </div>
{% endfor %}

This works well for home.html. All my articles are displayed within <div class = "col-md-6"></div> but it doesn't for hashtags.html page. If I have, say 10 articles coming for a particular hashtag, it will display two or more within <div class = "col-md-6"></div> and may be three outside it and the rest outside <div class = "row"></div>. And sometimes some are even displayed outside <div class = "container"></div>.

hashtag.html:

{% extends "mysite/base.html" %}
{% block mainBody %}
    {% include 'mysite/mainbody.html' %}
{% endblock %}

Query that fetches article for home.html is articles = Article.objects.all()[:10] while that of hashtag.html is articles = Article.objects.filter(content__icontains=hashtaggedword)[:10].

I have checked and checked to see if have any unclosed tag but couldn't find any even after using W3C Validator. I have also checked to see if there is something strange with those that display outside col-md-6 but they are okay and displayed in order of time they are created.

Upvotes: 1

Views: 280

Answers (2)

Tomasz Jakub Rup
Tomasz Jakub Rup

Reputation: 10680

Probably article.content have html tags. Escape them by escape.

{{ article.content|escape }}

Upvotes: 1

Arash Hatami
Arash Hatami

Reputation: 5551

try using this way:

<ul class="list-group">
    {% for article in articles reversed %}
        <li class="list-group-item">{{ article.content }}</li>
    {% endfor %}
</ul>

Result of this code is a simple list and you can put this to your column without any problem

Upvotes: 0

Related Questions