We Keep Coding

Pagination button not highlighting the current page

So I'm trying to make a button which highlights as active when the page is the same as page number, but it does not work, It only highlights page 1, When I go to page 2 then page 1 is still highlighed, index function handles the page I'm talking about.
views.py
from django.shortcuts import render
from .models import Listing
from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
# Create your views here.
def index(request):
listings = Listing.objects.all()
paginator = Paginator(listings, 3)
page = request.GET.get('page')
paged_listings = paginator.get_page(page)
params = {'listings':paged_listings}
return render(request, 'listings/listings.html', params)
def listing(request, listing_id):
return render(request, 'listings/listing.html')
def search(request):
return render(request, 'listings/search.html')
listings.html
{% extends 'base.html' %}
{% block content %}
{% load humanize %}
<!-- Breadcrumb -->
<section id="bc" class="mt-3">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="{% url 'index' %}">
<i class="fas fa-home"></i> Home</a>
</li>
<li class="breadcrumb-item active"> Browse Listings</li>
</ol>
</nav>
</div>
</section>
<!-- Listings -->
<section id="listings" class="py-4">
<div class="container">
<div class="row">
{% if listings %}
{% for listing in listings %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<img class="card-img-top" src="{{ listing.photo_main.url }}" alt="">
<div class="card-img-overlay">
<h2>
<span class="badge badge-secondary text-white">${{ listing.price | intcomma}}</span>
</h2>
</div>
<div class="card-body">
<div class="listing-heading text-center">
<h4 class="text-primary">{{ listing.title }}</h4>
<p>
<i class="fas fa-map-marker text-secondary"></i>{{ listing.city }} {{ listing.state }}, {{ listing.zipcode }}</p>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-th-large"></i>Sqfit: {{ listing.sqft }}</div>
<div class="col-6">
<i class="fas fa-car"></i>Garage: {{ listing.garage }}</div>
</div>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-bed"></i>Bedrooms: {{ listing.bedrooms }}</div>
<div class="col-6">
<i class="fas fa-bath"></i>Bathrooms: {{ listing.bathrooms }}</div>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-12">
<i class="fas fa-user"></i>{{ listing.realtor.name }}</div>
</div>
<div class="row text-secondary pb-2">
<div class="col-6">
<i class="fas fa-clock"></i>{{ listing.list_date | timesince }}</div>
</div>
<hr>
More Info
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="col-md-12">
<p>No Listings Available</p>
</div>
{% endif %}
<!-- Footer -->
<div class="row">
<div class="col-md-12">
{% if listings.has_other_pages %}
<ul class="pagination">
{% if listings.has_previous %}
<li class="page-item">
«
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link">«</a>
</li>
{% endif %}
</ul>
{% endif %}
{% for i in listings.paginator.page_range %}
{% if listings.number == i %}
<li class="page-item active">
<a class="page-link page-item">{{ i }}</a>
</li>
{% else %}
<li class="page-item">
{{i}}
</li>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</section>
{% endblock %}

You mistyped argument in page links. Just replace
<li class="page-item">
{{i}}
</li>
with
<li class="page-item">
{{i}}
</li>
(difference is equal sign = between query parameter and value)

The problem seems to be your use of
{% for i in listings.paginator.page_range %}
As this is returning a range, I think you should be using:
{% for i in listings.paginator %}

Paginator not displaying page numbers Django

I'm trying to use the paginator inbuild Django module so that the user can pass the pages. The problem is that I've configured everything as it should, but the pages numbers are not displaying. The place where it should have the numbers is entirely blank. Why can that due to?
Home Shop
Shop
<section class="ftco-section bg-light">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-10 order-md-last">
{% for item in items %}
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 ftco-animate d-flex">
<div class="product d-flex flex-column">
<a href="{{ item.get_absolute_url }}" class="img-prod"><img class="img-fluid" src='{% static "images/product-1.png" %}' alt="Colorlib Template">
<div class="overlay"></div>
</a>
<div class="text py-3 pb-4 px-3">
<div class="d-flex">
<div class="cat">
<span>{{ item.get_category_display }}</span>
</div>
<div class="rating">
<p class="text-right mb-0">
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
</p>
</div>
</div>
<h3>{{ item.title }}</h3>
<div class="pricing">
{% if item.discount_price %}
<p class="price"><span>${{ item.discount_price }}</span></p>
{% else %}
<p class="price"><span>${{ item.price }}</span></p>
{% endif %}
</div>
<p class="bottom-area d-flex px-3">
<span>Add to cart <i class="ion-ios-add ml-1"></i></span>
Buy now<span><i class="ion-ios-cart ml-1"></i></span>
</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row mt-5">
<div class="col text-center">
<div class="block-27">
{% if items.paginator.num_pages > 1 %}
<ul>
{% if items.has_previous %}
<li><</li>
{% endif %}
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
{% if items.has_next %}
<li>></li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</div>
views.py:
def shop(request):
items = Item.objects.all()
paginator = Paginator(items, 5)
page = request.GET.get('page')
posts = paginator.get_page(page)
context = {
'items': Item.objects.all(),
'page': page
}
return render(request, 'ecommerceapp/shop.html', context)
Any help i would really appreciate it. I've been trying to fix this issue for a while.

You have to use your posts object.
view.py
def shop(request):
items = Item.objects.all()
paginator = Paginator(items, 5)
page = request.GET.get('page')
posts = paginator.get_page(page)
context = {
'posts': posts
}
return render(request, 'ecommerceapp/shop.html', context)
template.html
<section class="ftco-section bg-light">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-10 order-md-last">
{% for item in posts %}
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 ftco-animate d-flex">
<div class="product d-flex flex-column">
<a href="{{ item.get_absolute_url }}" class="img-prod"><img class="img-fluid" src='{% static "images/product-1.png" %}' alt="Colorlib Template">
<div class="overlay"></div>
</a>
<div class="text py-3 pb-4 px-3">
<div class="d-flex">
<div class="cat">
<span>{{ item.get_category_display }}</span>
</div>
<div class="rating">
<p class="text-right mb-0">
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
</p>
</div>
</div>
<h3>{{ item.title }}</h3>
<div class="pricing">
{% if item.discount_price %}
<p class="price"><span>${{ item.discount_price }}</span></p>
{% else %}
<p class="price"><span>${{ item.price }}</span></p>
{% endif %}
</div>
<p class="bottom-area d-flex px-3">
<span>Add to cart <i class="ion-ios-add ml-1"></i></span>
Buy now<span><i class="ion-ios-cart ml-1"></i></span>
</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row mt-5">
<div class="col text-center">
<div class="block-27">
{% if posts.paginator.num_pages > 1 %}
<ul>
{% if posts.has_previous %}
<li><</li>
{% endif %}
{% for i in posts.paginator.page_range %}
<li>{{ i }}</li>
{% endfor %}
{% if posts.has_next %}
<li>></li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</div>

Colapsable Button Bootstrap Django

I'm trying to create a social media news feed, with the posts, but I dont want to show the comments just if the user presses the button Show Comments. The problem is that when I press the button of one post, all the post will extend comments. I don't really know how to solve this...
{% for post in posts %}
<div class="container">
<div class="row">
<div class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]">
<div class="[ panel panel-default ] panel-google-plus">
<div class="panel-heading">
<img class="[ img-circle pull-left ]" width="50" height="50" src="{{post.author.profile.image.url}}" alt="Mouse0270" />
<h3 class="author">{{post.author}}</h3>
<h5><span>Shared publicly</span> - <span> {{post.date_posted}} </span> </h5><br>
</div>
<div class="panel-body">
{% if user == post.author %}
<a class="text-right" href="{% url 'post-update' post.id %}"><p>Update</a>
<a class="text-danger text-right" href="{% url 'post-delete' post.id %}">Delete post</a>
{% endif %}
<p>{{post.content}}</p>
{% if post.image %}
<img src ="{{post.image.url}}" width="300" height="300" border="0" class="img-thumbnail">
{% endif %}
{% if post.video %}
<video width="250" controls >
<source src="{{post.video.url}}" type="video/mp4" >
</video>
{% endif %}
</div>
<br/>
<div class="container" >
<button class="btn btn-primary">Add comment</button>
</div>
<br>
<button type="button" class="btn btn-danger btn-block" data-toggle="collapse" data-target="#demo">See comments</button>
<div id="demo" class="collapse">
{% for comment in post.comments.all %}
<div class="container">
<div class="row">
<div class="col-sm-5">
<div class="panel panel-default">
<div class="panel-heading">
<strong>{{comment.author}}</strong> <span class="text-muted">commented at {{comment.created_on|date:"d M g:i a"}}</span>
</div>
<div class="panel-body">
<img class=" img-circle" width="30" height="30" src="{{comment.author.profile.image.url}}">
{{comment.body}}
</div><!-- /panel-body -->
</div><!-- /panel panel-default -->
</div><!-- /col-sm-5 -->
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
The problem is with the collapsable button above {% for comment in post.comments.all %}, but I dont know how to make it unique for every post.

for loop not working for boostrap carousel

I have a for loop that displays images (media_gallery1-4) obtained from users. Each post should display four images and cycle in a bootstrap carousel. There are about 10 posts on my page. When I click the next or previous button on any of the 10 posts it only changes the image of the first post and the other 9 remain the same. How do I change my code so that the next/previous arrows change cycle through the images for that specific posts. Let me know if more context is needed.
{% for post in posts %}
<div class="container">
<div class="row">
<div class = "form-group col-md-6 mb-0">
<div id="carouselExampleControls" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"class="active">
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" id="slide1">
{% if post.media_gallery %}
<img class="img" src="{{post.media_gallery.url}}">
{% else %}
<div class="defualt_image">
<img src= "{% static 'main/images/boston_apartments.jpg' %}">
</div>
{% endif %}
</div>
<div class="carousel-item active" id="slide2">
{% if post.media_gallery2 %}
<img class="img" src="{{post.media_gallery2.url}}">
{% else %}
<div class="defualt_image">
<img src= "{% static 'main/images/boston_apartments.jpg' %}">
</div>
{% endif %}
</div>
<div class="carousel-item active" id="slide3">
{% if post.media_gallery %}
<img class="img" src="{{post.media_gallery3.url}}">
{% else %}
<div class="defualt_image">
<img src= "{% static 'main/images/boston_apartments.jpg' %}">
</div>
{% endif %}
</div>
<div class="carousel-item active" id="slide4">
{% if post.media_gallery %}
<img class="img" src="{{post.media_gallery4.url}}">
{% else %}
<div class="defualt_image">
<img src= "{% static 'main/images/boston_apartments.jpg' %}">
</div>
{% endif %}
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>

Hey Did you try this code :
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
{% for post in posts %}
<div class="container">
<div class="row">
<div class = "form-group col-md-6 mb-0">
<div id="carouselExampleControls" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active" id="slide1">
{% if post.media_gallery %}
<img class="img" src="{{post.media_gallery.url}}">
{% else %}
<div class="defualt_image">
<img src= "{% static 'main/images/boston_apartments.jpg' %}">
</div>
{% endif %}
</div>
<div class="carousel-item" id="slide2">
{% if post.media_gallery2 %}
<img class="img" src="{{post.media_gallery2.url}}">
{% else %}
<div class="defualt_image">
<img src= "{% static 'main/images/boston_apartments.jpg' %}">
</div>
{% endif %}
</div>
<div class="carousel-item" id="slide3">
{% if post.media_gallery %}
<img class="img" src="{{post.media_gallery3.url}}">
{% else %}
<div class="defualt_image">
<img src= "{% static 'main/images/boston_apartments.jpg' %}">
</div>
{% endif %}
</div>
<div class="carousel-item" id="slide4">
{% if post.media_gallery %}
<img class="img" src="{{post.media_gallery4.url}}">
{% else %}
<div class="defualt_image">
<img src= "{% static 'main/images/boston_apartments.jpg' %}">
</div>
{% endif %}
</div>
<a class="right carousel-control" href="#carouselExampleIndicators" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
<a class="left carousel-control" href="#carouselExampleIndicators" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
</div>
</body>

Django blogs not looping properly

I have created a blog with Django that I originally looped through each post with:
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
<h4>{{ post.title }}</h4>
<i class="fa fa-calendar" aria-hidden="true"></i> {{ post.pub_date_pretty }}
<img src="{{ post.image.url }}" class="img-responsive center-sm-block" style='width:75%; text-align:center;' />
<br/>
<p>{{ post.summary }}</p>
<br/>
<br/>
{% endfor %}
</div>
Which worked great! But I didn't just want to have a linear list of post and wanted to display each unique post in a bootstrap card which I attempted with this solution:
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
<div class="row">
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
</div>
{% endfor %}
</div><!-- End container -->
However each unique post now displays twice in a card:
First row of posts
Second row of posts
Any help would be greatly appreciated! This is my first Django project and I have gotten pretty far already. However this is tripping me up quite badly.
Edit: Just to clarify I need to have a second post in that card is what I'm asking. I want two cards displayed side by side, each with a unique post

<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
{% if forloop.counter0|divisibleby:2 %}
<div class="row">
{% endif %}
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
</div>
{% if forloop.counter|divisibleby:2 == False %}
</div>
{% endif %}
{% endfor %}
// When lenght of posts is even the <div> is not close. Close it!</div>
{% if posts.all|length|divisibleby:2 == False %}
</div>
{% endif %}
</div><!-- End container -->