Django cannot render the template url? - python

I have 3 apps in django project, I created a new html file on dictionary app which is Refcode_Info.html. This page must render a simple form and linked a simple. When I click the button, form must show on screen. However when I click the button, I get 404 page and mixxed url, Likewise, I want to direct another url on this page, but seconda url already exits in this project and I have used on different stages on project but doesnt work on new html page(Refcode_Info.html). My new html may have a problems but my Accounts links is working on different stages.
This is my Refcode_Info.html codes on below.
<script>
$(document).ready(function() {
if ($(document).width() > 768) {
$("#accordion_desktop").accordion({
header: '.header',
collapsible: true,
active: false,
autoHeight: true,
heightStyle: 'content',
animate: 50
});
$("#desktop").show();
} else {
$("#accordion_mobile").accordion({
header: '.header',
collapsible: true,
active: false,
autoHeight: true,
heightStyle: 'content',
animate: 50
});
$("#mobile").show();
}
$(window).resize(function() {
if ($(document).width() > 768) {
$("#accordion_desktop").accordion({
header: '.header',
collapsible: true,
active: false,
autoHeight: true,
heightStyle: 'content',
animate: 50
});
$("#desktop").show();
$("#mobile").hide();
} else {
$("#accordion_mobile").accordion({
header: '.header',
collapsible: true,
active: false,
autoHeight: true,
heightStyle: 'content',
animate: 50
});
$("#mobile").show();
$("#desktop").hide();
}
});
});
</script>
<style>
.ui-widget-content {
border: none;
}
.ui-state-focus {
outline: none;
}
.sign-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
/* add */
justify-content: center;
/* add to align horizontal */
align-items: center;
/* add to align vertical */
}
#accordion_desktop .ui-icon {
display: none;
}
#accordion_desktop .ui-accordion-header a {
padding-left: 0;
}
#accordion_mobile .ui-icon {
display: none;
}
#accordion_mobile .ui-accordion-header a {
padding-left: 0;
}
</style>
<div id="desktop" class="container-fluid p-0" style="display:none; text-align:center;">
<div id="accordion_desktop">
<!-- Not a student-->
<div class="header m-0 p-0" style="border:none; background: #0c151D;">
<div class="row pt-5 pb-4 m-0" style="background-color: #0c151D; padding-top: 1rem !important; padding-bottom: 1rem !important;">
<div class="col-4 col-md-2 p-0">
<div class="text-right">
<img class="img-fluid" src="/static/img/studentnot.png" style="max-height: 100px;" />
</div>
</div>
<div class="col-8 col-md-10 text-center">
<p style="color:#FFFFFF; font-size:1.4em;padding-top:1.25em;">Üniversite personeli/öğrencisi değilim <img class="img-fluid" src="/static/img/plus_blue.png" style="max-height: 25px; margin-bottom: 5px; margin-left: 10px;" /></p>
</div>
</div>
</div>
<div class="row pt-4 pb-4" style="background-color:#0c151D;">
<div class="col-12 col-md-12 text-center pt-3">
<p style="color:#FFFFFF; font-size:1.2em;">Legaling'in zengin veri tabanından, şu aşamada yalnızca üniversiteler vasıtasıyla faydalanılabilmektedir. Ancak istisnai durumlarda bireysel kullanıcılara da ücretsiz erişim hakkı tanımlanabilmektedir. Bu kapsamda Legaling'i nereden duyduğunuz
ve neden tam bir erişim talep ettiğinizi bizimle paylaşırsanız başvurunuzu değerlendirmeye almaktan mutluluk duyarız.</p>
<a class="btn btn-primary" href="{% url 'Accounts:personalize' %}">Referans Kodu Ekle</a>
<a class="btn btn-primary" href="mailto:legalingnetdestek#gmail.com">Kod Talebi Gönder</a>
<a class="btn btn-primary" href="mailto:legalingnetdestek#gmail.com">Konu ile İlgili Düşünceleriniz</a>
</div>
</div>
<!-- Student -->
<div class="header m-0 p-0" style="border:none; background: #1E2329;">
<div class="row pt-5 pb-4 m-0" style="background-color:#1E2329; padding-top: 1rem !important; padding-bottom: 1rem !important;">
<div class="col-4 col-md-2 p-0">
<div class="text-right">
<img class="img-fluid" src="/static/img/student.png" style="max-height: 100px;" />
</div>
</div>
<div class="col-8 col-md-10 text-center">
<p style="color:#FFFFFF; font-size:1.4em;padding-top:1.25em;">Üniversite personeliyim/öğrencisiyim. <img class="img-fluid" src="/static/img/plus_gray.png" style="max-height: 25px; margin-bottom: 5px; margin-left: 10px;" /></p>
</div>
</div>
</div>
<div class="row pt-4 pb-4" style="background-color:#1E2329;">
<div class="col-12 col-md-12 text-center pt-3">
<p style="color:#FFFFFF; font-size:1.2em;">Legaling, belirli bir üniversiteden en az 2 personel ya da 10 öğrenciden talep gelmesi durumunda ilgili üniversite ile Legaling'in zengin veri tabanını açmak üzere temasa geçer. Bu doğrultuda Legaling'in üniversiteniz ile temasa geçmesini
istiyorsanız aşağıdaki alanları doldurunuz</p>
<a class="btn btn-primary" href="{% url 'Dictionary:getUniInfo' %}">Üniversite Bilgilerini Paylaş</a>
</div>
</div>
</div>
</div>
<!-- MOBILE -->
<div id="mobile" class="container-fluid p-0" style="display:none;">
<div id="accordion_mobile">
<!-- Not a Student -->
<div class="header m-0 p-0" style="border:none; background: #0c151D;">
<div class="row m-0 p-1" style="background-color:#0C151D; padding-top: 1rem !important; padding-bottom: 1rem !important;">
<div class="col-3 col-md-2 p-0">
<div class="sign-container text-right">
<img class="img-fluid" src="/static/img/studentnot.png" style="max-height: 60px;" />
</div>
</div>
<div class="col-8 col-md-9 text-center">
<p style="color:#FFFFFF; font-size:1.2em;">Legaling'in zengin veri tabanından, şu aşamada yalnızca üniversiteler vasıtasıyla faydalanılabilmektedir. Ancak istisnai durumlarda bireysel kullanıcılara da ücretsiz erişim hakkı tanımlanabilmektedir. Bu kapsamda Legaling'i nereden
duyduğunuz ve neden tam bir erişim talep ettiğinizi bizimle paylaşırsanız başvurunuzu değerlendirmeye almaktan mutluluk duyarız.</p>
</div>
<div class="col-1 col-md-1 p-0">
<div class="sign-container">
<img class="img-fluid" src="/static/img/plus_blue.png" style="max-height: 25px;" />
</div>
</div>
</div>
</div>
<!-- Student -->
<div class="header m-0 p-0" style="border:none; background: #1E2329;">
<div class="row p-1 m-0" style="background-color:#1E2329; padding-top: 1rem !important; padding-bottom: 1rem !important;">
<div class="col-3 col-md-2 p-0">
<div class="sign-container text-right">
<img class="img-fluid" src="/static/img/student.png" style="max-height: 60px;" />
</div>
</div>
<div class="col-8 col-md-9 text-center">
<p style="color:#FFFFFF; font-size:1.2em; padding-top: 1em;">Üniversite personeliyim/öğrencisiyim.</p>
</div>
<div class="col-1 col-md-1 p-0">
<div class="sign-container">
<img class="img-fluid" src="/static/img/plus_gray.png" style="max-height: 25px;" />
</div>
</div>
</div>
</div>
<div class="row pt-4 pb-4" style="background-color:#1E2329;">
<div class="col-12 col-md-12 text-center pt-3">
<p style="color:#FFFFFF; font-size:1.2em;">Legaling, belirli bir üniversiteden en az 2 personel ya da 10 öğrenciden talep gelmesi durumunda ilgili üniversite ile Legaling'in zengin veri tabanını açmak üzere temasa geçer. Bu doğrultuda Legaling'in üniversiteniz ile temasa geçmesini
istiyorsanız aşağıdaki alanları doldurunuz</p>
</div>
</div>
</div>
</div>
This is views.py page attached below;
def getUniInfo(request):
text = open(os.path.join(settings.BASE_DIR, "Dictionary", "templates","Refcode_Info.html"),"r",encoding="utf8")
UsageText = text.read()
text.close()
if request.method == 'POST':
form = askUniversityInfoForm(request.POST)
if form.is_valid():
obj = UserUniversity() # get new user details
obj.university = form.cleaned_data['universityName']
obj.university_user_email = form.cleaned_data['universityEmail']
obj.save()
mail_subject = "Legaling Aktivasyon Maili"
to_email = form.cleaned_data.get('email')
email = EmailMessage(mail_subject, message, to=[to_email])
email.content_subtype = "html"
email.send()
context = {'UserUniversity', UserUniversity}
return render(request, "Refcode_Info.html", context)
else:
return redirect('Dictionary:index')
else:
form = askUniversityInfoForm()
if(request.is_ajax()):
return render(request, 'usertext_partial.html', {'title':"Neden Referans Kodu Almalıyım?", 'text':UsageText})
else:
return render(request, 'usertext.html', {'title':"Neden Referans Kodu Almalıyım?", 'text':UsageText})
This is forms.py attached below;
class askUniversityInfoForm(forms.Form):
universityName= forms.CharField(label='Your University Name', max_length=100, required=True, widget=forms.TextInput())
universityEmail= forms.CharField(label='Your university Email Address', max_length=100, required=True, widget=forms.TextInput())
def __init__(self, *args, **kwargs):
self.helper = FormHelper()
self.helper.add_input(Submit('Gönder', 'Gönder', css_class='bbtn btn-block btn-success'))
super(askUniversityInfoForm, self).__init__(*args, **kwargs)
if not 'userid' in self.initial:
self.fields['name'] = forms.CharField(required=True, label="Adınız", max_length=50)
self.fields['surname'] = forms.CharField(required=True, label="Soyadınız", max_length=100)
self.fields['email'] = forms.EmailField(required=True, label="E-Posta Adresiniz", max_length=150)
self.fields['phonenumber'] = forms.RegexField(regex=r'^\([0-9]{3}\)\-?\s?[0-9]{3}\-?\s?[0-9]{2}\-?\s?[0-9]{2}$',required=False,label='Cep Telefonu Numarası', widget=forms.widgets.TextInput(attrs={'type':'tel','class':'input-phone','onfocus':'registerphoneinput();'}), error_messages = {'invalid':"Telefon Numarası Formatı Doğru Değil"})
self.fields['profession'] = ProfessionchoiceField(queryset=Profession.objects.all(), required=True,label='Mesleğiniz')
self.fields['captcha'] = ReCaptchaField(widget=ReCaptchaV2Checkbox, label='')
Also the my urls;
from django.conf.urls import url, include
from django.urls import path, re_path
from Dictionary import views
path('referencecodetext', views.referencecodetext, name='referencecodetext'),
path('getUniInfo', views.getUniInfo, name='getUniInfo'),
Also, I have url output like this, I research which is why but I couldn't found it.
enter image description here
Anyone have a idea?

Related

Why am I getting a random string and not the expected output in Beautiful soup in Python?

With the following url and soup, I have the following and I seek to webscrape the Subdivision Information Section. I have copied the html portion for one house below:
house_url = 'https://www.har.com/homedetail/2701-main-st-1910-houston-tx-77002/15331551'
house_response = requests.get(url=house_url, headers=your_header)
house_soup = BeautifulSoup(house_response.text, 'html.parser').find('div', {'class':'pt-2 pb-2 mr-4 pr-md-5 ml-4 pl-md-5'})
Subdivision Section HTML
<div id="subDivisonInfo" class="lazy" data-contentname="subdivision-facts"><div class="mb-5 pb-5 border-bottom border-color--cement_light">
<h2 tabindex="0">Subdivision Facts</h2>
<a class="font_weight--bold font_size--large mr-4" href="/geomarketarea/100_midtown---houston">View Neighborhood Profile </a>
<div class="mb-5 mt-4 pb-3">
<a href="/geomarketarea/100_midtown---houston">
<div class="mb-3 border_radius--round image" style="height: 360px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url("https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/path-1+0000ff-0.45+0000ff-0.45(u%7CstDfobeQnCbExAhAdCx%40xBXvDDlA%40lMF%7ECBvBEhJOVAnDo%40dDiClByCpCkEh%60%40sv%40zx%40vi%40rGhEx%40jAXF%5ElAB%60%40Bx%40Dx%40%3FfBPlBLxA%60%40fL%5EtMNhGFlBJdEDxAHlANdCHbBPpDDpA%3FhDFzE%40xB%40zADbBa%40sB%5Bk%40q%40gA%7DA%7DAw%40k%40yAcAqBwAyAgAiBuAyCyBoBuAmA%7B%40u%40i%40%7BBaB%7BC%7BAsBc%40kF%5D%7BE%3F%7BDHqCIuESk%40%3FCvCAv%40%3FtCJ%7EK%3FlA%7DLB%3F%7B%40yJB_K%40_E%3FwJ%40mX%40yA%40sIFgM%40%3FkDOcCm%40_IeBgG%3F%3FaAyDs%40_EWgBGsASuDQiNGoNKwJ%3F%3FQuH%7EClJjCfG)/auto/651x360?access_token=pk.eyJ1IjoiaGFyZGV2ZXJpY2siLCJhIjoiY2sxZ3FuNWJpMDFtbDNjbDJ0bnJnbnpkdyJ9.byj8yrbalnyCw4u9TNwYuA");">
<img class="img-fluid img-loader" src="https://content.harstatic.com/img/common/loading1.gif" style="display: none;">
</div>
<script type="text/javascript">
/*! domready (c) Dustin Diaz 2014 - License MIT */
;!function(e,t){"undefined"!=typeof module?module.exports=t():"function"==typeof define&&"object"==typeof define.amd?define(t):this.domready=t()}(0,function(){var e,t=[],o="object"==typeof document&&document,n=o&&o.documentElement.doScroll,d=o&&(n?/^loaded|^c/:/^loaded|^i|^c/).test(o.readyState);return!d&&o&&o.addEventListener("DOMContentLoaded",e=function(){for(o.removeEventListener("DOMContentLoaded",e),d=1;e=t.shift();)e()}),function(e){d?setTimeout(e,0):t.push(e)}});
</script>
<script type="text/javascript">
domready(function() {
HARMap.load().then(function(module) {
var componentId = 'image24906579';
var polygon = 'POLYGON((-95.372842651 29.762188072,-95.373816894 29.761474216,-95.374191992 29.76101599,-95.374483311 29.760352652,-95.374609142 29.759738202,-95.374640089 29.758819359,-95.374647572 29.758426112,-95.374691499 29.756117694,-95.374706659 29.75532102,-95.3746799 29.754718062,-95.374599516 29.752906601,-95.374594347 29.752790096,-95.374351409 29.751909331,-95.373661419 29.751078253,-95.372887724 29.750528187,-95.371869687 29.74980439,-95.362970840876 29.744465093909,-95.369806756 29.735213416,-95.370819903 29.733833779,-95.371197558 29.733537028,-95.371239769 29.733411918,-95.371629671 29.733245349,-95.371804383 29.73323255,-95.372090663 29.733211576,-95.372379167 29.733175792,-95.372896911 29.733184661,-95.373448298 29.733085864,-95.373897555 29.73302357,-95.376020952 29.732848991,-95.378367141 29.732692501,-95.379698574 29.732605591,-95.380251649 29.73256989,-95.381236514 29.732506316,-95.381686127 29.732477294,-95.382077218 29.732432106,-95.382753475 29.732353969,-95.383254109 29.732299798,-95.384141891 29.732214015,-95.384547373 29.732184995,-95.385401694 29.732177061,-95.386504599 29.7321448,-95.387113815 29.732128476,-95.38757473 29.732116124,-95.388065951 29.732085741,-95.387487144 29.732263493,-95.387266095 29.732397447,-95.386907035 29.732649085,-95.386438833 29.733120089,-95.386221661 29.733399038,-95.385875385 29.733846224,-95.385438799 29.734415138,-95.38508092 29.734869849,-95.384651063 29.735397347,-95.384037746 29.736172341,-95.383612227 29.736729284,-95.383311768 29.737122539,-95.383099783 29.737389038,-95.382608073 29.738007194,-95.382145211 29.738793482,-95.381972784 29.739372769,-95.381824272 29.740550975,-95.381818116 29.741650627,-95.381867014 29.742586972,-95.381820616 29.743316543,-95.38172399 29.744387766,-95.381721351 29.744610716,-95.382483057 29.744631286,-95.382763059 29.744636527,-95.383509646 29.74463557,-95.385588363 29.744584135,-95.385979746 29.744575193,-95.386003821 29.746807942,-95.385699411 29.746810253,-95.385718338 29.748696241,-95.385725089 29.750624573,-95.385732125 29.75158054,-95.385735183 29.753459289,-95.385748282 29.757531403,-95.385758824 29.757976236,-95.385799269 29.75968271,-95.385808634 29.76196431,-95.384952318 29.761964306,-95.384292125 29.762037035,-95.382689529 29.76226967,-95.381370964 29.762781324,-95.381373603 29.762782609,-95.380443808 29.763114063,-95.379476498 29.763374528,-95.378959294 29.763485938,-95.378540344 29.763528353,-95.377633441 29.763629227,-95.375180147 29.763724096,-95.37270141 29.763764494,-95.370824522 29.763815179,-95.370818039 29.76381558,-95.369274785 29.76391082,-95.371101581 29.763114639,-95.372416403 29.762414919,-95.372842651 29.762188072))';
var node = $('.' + componentId).removeClass(componentId);
// var result = module.StaticMap.custom.withPolygon(node.width(), node.height(), polygon)
// result.backgroundImage(node);
var result = module.StaticMap.custom.withPolygon(node.width(), node.height(), polygon)
result.backgroundImage(node);
/*var geometry = module.geometry;
var points = geometry.pointsFromWKT(polygon);
//console.log(points);
if(points.length > 100) { points = geometry.simplifyPolygon(points, 0.0001); }
if(points.length > 100) { points = geometry.simplifyPolygon(points, 0.001); }
//console.log(points);
var encString = geometry.encodePath(points);
var width = node.width();
var height = node.height();
if(!width) { console.error('width cannot be empty!'); }
if(!height) { console.error('height cannot be empty!'); }
var path = encodeURIComponent("weight:1|fillcolor:blue|enc:" + encString);
var url = "/api/staticmap?size="+ width +"x"+ height +"&path="+ path + "&client=gme-houstonrealtorsinformation";
// alert(url);
//$(node).html('<a class="pointer" href="'+url+'" id="hoodMapStaticLink"></a><img />');
var image = new Image();
image.onload = image.onerror = function() { node.find('img').remove(); }
image.src = url;
$(node).css('background-image', 'url(' + url + ')');*/
});
});
</script> </a>
</div>
<h3 class="mt-5 pb-3" tabindex="0">Facts (Based on Active listings)</h3>
<div class="row">
<div class="col-md-4 col-6 mb-4">
<div class="font_weight--bold font_size--small_extra">Market Area Name</div>
<div class="font_size--large font_weight--regular">Midtown - Houston</div>
</div>
<div class="col-md-4 col-6 mb-4">
<div class="font_weight--bold font_size--small_extra">Home For Sales</div>
<div class="font_size--large font_weight--regular">104</div>
</div>
<div class="col-md-4 col-6 mb-4">
<div class="font_weight--bold font_size--small_extra">Average List Price</div>
<div class="font_size--large font_weight--regular">$428,844</div>
</div>
<div class="col-md-4 col-6 mb-4">
<div class="font_weight--bold font_size--small_extra">Average Bedrooms</div>
<div class="font_size--large font_weight--regular">2.27</div>
</div>
<div class="col-md-4 col-6 mb-4">
<div class="font_weight--bold font_size--small_extra">Average Baths</div>
<div class="font_size--large font_weight--regular">2.07</div>
</div>
<div class="col-md-4 col-6 mb-4">
<div class="font_weight--bold font_size--small_extra">Average Sqft</div>
<div class="font_size--large font_weight--regular">1,873</div>
</div>
<div class="col-md-4 col-6 mb-4">
<div class="font_weight--bold font_size--small_extra">Average Price/Sqft</div>
<div class="font_size--large font_weight--regular">$236.48</div>
</div>
<div class="col-md-4 col-6 mb-4">
<div class="font_weight--bold font_size--small_extra">Home For Lease</div>
<div class="font_size--large font_weight--regular">96</div>
</div>
<div class="col-md-4 col-6 mb-4">
<div class="font_weight--bold font_size--small_extra">Average Lease</div>
<div class="font_size--large font_weight--regular">$2,396</div>
</div>
<div class="col-md-4 col-6 mb-4">
<div class="font_weight--bold font_size--small_extra">Average Lease/Sqft</div>
<div class="font_size--large font_weight--regular">$1.76</div>
</div>
</div>
</div>
</div>
However, whenever I use beautifulSoup to get the text such as "Average List Price:$428,844", This is the output I get:
house_soup.find('div',{'id':'subDivisonInfo'}).find('div',{'class':'row'}).findAll('div',{'class':'col-md-4 col-6 mb-4'})[0].getText()
'\n-----------\n-----------\n'
I am not sure why it is returning this string instead of the actual text?
The required data is loaded from external source via AJAX.So you have to use API url instead.
import requests
from bs4 import BeautifulSoup
api_url= 'https://www.har.com/api/getSubdivisionFacts/15331551'
req=requests.get(api_url).text
#print(req)
soup= BeautifulSoup(req,'lxml')
price = soup.select_one('[class="col-md-4 col-6 mb-4"] > div:-soup-contains("Average List Price")').find_next_sibling('div')
print(price.text)
Output:
$428,844
Because there is a script executed that gets the data when you open the url in the browser. Try performing a get request in python and check the html contents. The initial html does not contain the details you are looking for such as "Average Listing Price".

submit order and redirect to an individual platform

i am trying to develop a django webapp .i want the user to be able to submit other and get redirected to the user's platform where the user sees all his orders . i want a system where the user can make orders and get redirected to a page where will see all his orders
client form:
{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}
{% if user.is_authenticated %}
<div class="container" style="width: 50rem;">
<div class="col-md-10 offset-md-1 mt-5">
<div class="jumbotron">
<!--<h3 id="form-title">Job Specification </h3>-->
<h3 class="display-4" style="text-align: center;">Service Request</h3>
<p id="form-title" style="color: #343a40; text-align: center;">Please provide us with the following information</p>
<hr class="my-4">
<form action="{% url 'clients:add_item' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="col-md-4">
{{ form.job_name|as_crispy_field }}
</div>
<div class="col-md-8">
{{ form.text_description|as_crispy_field }}
</div>
</div>
<div class="row">
<div class="col-md-4">
{{ form.location|as_crispy_field }}
</div>
<div class="col-md-8">
{{ form.address|as_crispy_field }}
</div>
</div>
<div class="row">
<div class="col-md-6">
<!--{{ form.phone|as_crispy_field }}-->
<input style="height: 2.5rem;margin: 0 0 8px 0; width: 100%; text-align: center; position: relative; " type="text" name="phone" value="{{ user.details.phone }}" readonly><br>
</div>
<div class="col-md-6">
<input style="height: 2.5rem;margin: 0 0 8px 0; width: 100%; text-align: center; position: relative; " type="text" name="email" value="{{user.email}}" placeholder=" email " readonly><br>
</div>
</div>
<div class="row">
<div class="col-md-6">
{{ form.status|as_crispy_field }}
</div>
<div class="col-md-6" style="height: 2rem;">
<!---{{ form.customer|as_crispy_field }}-->
<input style="height: 2.5rem;margin: 0 0 8px 0; width: 100%; text-align: center; position: relative; top: 30px;" type="text" name="customer" value="{{ user.username}}" placeholder="username" readonly><br>
</div>-->
</div>
<div class="col-md-6">
<input style="height: 2.5rem;margin: 0 0 8px 0; width: 100%; text-align: center; position: relative; " type="text" name="id" value="{{ user.details.id }}" placeholder=" id " readonly><br>
</div>
<h2>
<!-- Your template -->
</h2>
<!--<div class="d-flex justify-content-center mt-3 login_container">
<input class="btn login_btn" type="submit" value="Submit">
</div>-->
<button role="button" class="btn btn-danger btn-lg">Submit</button>
</form>
</div>
</div>
</div>
{{ form.errors }}
{% else %}
<div class="container" style="width: 20rem; background-color: #6e1a52; margin-top: 70px; height: 20rem;" >
<div class="col-md-10 offset-md-1 mt-5" >
<!--<div class="jumbotron">
<h3 id="form-title" style="text-align: center;">Please login to enable you request the service you want</h3>-->
<h3 class="display-44" style="text-align: center; font-size: 22px; margin-top: 50px; color: #343a40;">request service</h3>
<p id="form-title" >Please login to enable you request the service you want</p>
<a href="{% url 'accounts:login' %}"
style="font-size: 24px; text-align: center; text-decoration: none;" >Login</a>
<!-- <a action="{% url 'profession:add_item' %}" role="button" class="btn btn-primary btn-lg">Submit</a>-->
</div>
</div>
{% endif %}
view file for client view:
#login_required
def insert_ClientJob(request):
if request.method == 'POST':
form = ClientJobForms(request.POST)
user_id=request.POST.get('id')
if form.is_valid():
product = form.save(commit=False)
#customer = ClientJob.objects.create(customer=product)
#product.customer =customer
product.save()
messages.success(request ,"successful")
return redirect('profession:user',user_id)
else:
form = ClientJobForms()
return render(request ,'job_request.html' ,{'form': form})
url file client url:
om django.urls import path
from .views import *
from .import views
app_name = 'clients'
urlpatterns = [
path('add_item/', views.insert_ClientJob ,name='add_item'),
]
model file client model:
from django.db import models
# Create your models here.
class ClientJob(models.Model):
STATUS = (
('Pending', 'Pending'),
#('On-going', 'On-going'),
('Completed', 'Completed'),
)
customer = models.ForeignKey('accounts.Customer', null=True,blank=True, on_delete= models.SET_NULL,related_name='client')
job_name = models.CharField(max_length=50,unique =False)
text_description = models.CharField(max_length=150,null=True)
location = models.ForeignKey('accounts.Area' ,on_delete =models.CASCADE)
address = models.CharField(max_length=200,unique =False)
phone =models.CharField(max_length=15,unique =False)
email = models.EmailField(unique = False)
date_created = models.DateTimeField(auto_now_add=True, null=True)
status = models.CharField(max_length=200, null=True, choices=STATUS,default='Pending')
def __str__(self):
return self.job_name
class Meta:
verbose_name_plural = "Client Job"
form file client form:
from django.db.models import fields
from django.forms import ModelForm
from django import forms
from django.contrib.auth.models import User
from .models import *
class ClientJobForms(ModelForm):
class Meta:
model = ClientJob
fields = ['job_name','text_description','location','address','phone','email','status','customer']
#fields ="__all__"
def __init__(self, *args, **kwargs):
super(ClientJobForms, self).__init__(*args, **kwargs)
self.fields['location'].empty_label ='Your location'
admin file client admin:
list_display = ('id','job_name','text_description','location','address','phone','email','date_created','status','customer')
admin.site.register(ClientJob ,ClientJobAdmin)
accounts model:
class Area(models.Model):
area_code = models.CharField(max_length=7)
location = models.CharField(max_length=100)
def __str__(self):
return self.location
class Meta:
verbose_name_plural = "Area"
class Customer(models.Model):
user = models.OneToOneField(User,null=True,blank=True, on_delete= models.SET_NULL,related_name='details')
address = models.CharField(max_length=200, null=True)
phone = models.CharField(max_length=15, null=True)
date_created = models.DateTimeField(auto_now_add=True, null=True)
def __str__(self):
return str(self.user)

Page not found (404) No cart matches the given query

The error is raised :
Page not found (404) No cart matches the given query.
Request Method: GET Request
URL: http://127.0.0.1:8000/change_quan?cid=1&quantity=2
Raised by: myapp.views.change_quan
when i am trying to save quantity value in database
i tried but this error raised always
my views.py
def productcart(request):
context = {}
items = cart.objects.filter(user__id=request.user.id,status=False)
context["items"] = items
if request.user.is_authenticated:
if request.method=="POST":
pid = request.POST["pid"]
qty = request.POST["qty"]
img = request.POST["img"]
dis_price = request.POST["dis_price"]
is_exist = cart.objects.filter(product__id=pid,user__id=request.user.id,status=False)
if len(is_exist)>0:
context["msg"] = "item already exist in cart"
context["cls"] = "alert alert-warning"
else:
product = get_object_or_404(Product,id=pid)
usr = get_object_or_404(User,id=request.user.id)
c = cart(user=usr,product=product,quantity=qty,image=img,total_price=dis_price)
c.save()
context["msg"] = "{} Added in cart".format(product.name)
context["cls"] = "alert alert-success"
else:
context["status"] = "Please login first to add products to cart"
return render(request,'E-commerce-cart.html',context)
def get_cart_data(request):
items = cart.objects.filter(user__id=request.user.id,status=False)
sale,total,quantity=0,0,0
for i in items:
sale+=i.product.discount
total+=i.product.price
quantity+=i.quantity
res={
"total":total,"offer":sale,"quan":quantity
}
return JsonResponse(res)
def change_quan(request):
qty = request.GET["quantity"]
cid = request.GET["cid"]
print(request.GET)
cart_obj = get_object_or_404(cart,id=cid)
cart_obj.quantity = qty
cart_obj.save()
return HttpResponse(1)
my urls.py
"""emarket URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from os import name
from django.contrib import admin
from django.urls import path
from myapp import views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.home,name='home'),
path('shop/',views.shop,name='shop'),
path('login/',views.create_user,name='login'),
path('logout/',views.user_logout,name='logout'),
path('cart/',views.productcart,name='cart'),
path('checkout/',views.checkout,name='checkout'),
path('product_detail/',views.product_detail,name='prodct-detail'),
path('find_us/',views.find_us,name='find'),
path('blog/',views.blog,name='blog'),
path('base/',views.base),
path('api/categories',views.all_categories,name="all_categories"),
path('api/brand',views.brand,name="brand"),
path('api/products',views.product_filter_api,name="product_filter_api"),
path('user_check/',views.check_user,name="check_user"),
path('filter_product/',views.filter_product,name="filter_product"),
path('add_to_favourite/',views.add_to_favourite,name="add_to_favourite"),
path('all_favourites/',views.all_favourites,name="all_favourites"),
path('forgotpass',views.forgotpass,name="forgotpass"),
path('resetpass',views.resetpass,name="resetpass"),
path('get_cart_data',views.get_cart_data,name="get_cart_data"),
path('change_quan',views.change_quan,name='change_quan'),
]+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
my models.py
class cart(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
product = models.ForeignKey(Product,on_delete=models.CASCADE)
image = models.ImageField(default=False)
total_price=models.FloatField(default=False)
quantity = models.IntegerField()
status = models.BooleanField(default=False)
added_on = models.DateTimeField(auto_now_add=True)
updated_on = models.DateTimeField(auto_now=True)
def __str__(self):
return self.user.username
my html code
{% extends 'base.html' %}
{% block head %}
<style>
.k{height: 1px;background-color: rgb(211, 207, 207);}
.s{color:rgb(240, 240, 240);
letter-spacing: 3px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;}
.cncl_icn{
float: left;
margin: 15px;
padding-top: 10px;
}
.a:hover{
background-color:rgba(152, 209, 255, 0.705);color: rgb(255, 255, 255);box-shadow:0px 0px 7px 7px rgba(204, 201, 201, 0.5) ;
}
#media screen and (max-width:680px){
.b{opacity: 0;}
/* .v{position: absolute;top: 5px;} */
.s{font-size: 15px;}
}
#media screen and (min-width:1024px){
.s{font-size: 20px;}
}
</style>
{% endblock %}
{% block body %}
{% if user.is_superuser %}
<div class="container-fluid "></div>
<h1 class="jumbotron my-5" >you are not Allowed here</h1>
{% else %}
{% if status %}
<h1 class="jumbotron my-5">{{status}}</h1>
{% else %}
{% if msg %}
<div class="{{cls}}">{{msg}}</div>
{% endif %}
<div class="row v " style="margin-right: 0%;">
<div class="col-lg-7" >
<div class="row text-center p-3 b" style="background-color: rgba(2, 184, 184, 0.863); background-attachment: fixed;">
<div class="col-md-3 "> <h3 class="s">Product</h3></div>
<div class="col-md-3 "><h3 class="s">Price</h3></div>
<div class="col-md-3 "><h3 class="s">Qantity</h3></div>
<div class="col-md-3 "><h3 class="s">Total</h3></div>
</div>
{% for i in items %}
<div class="row a border-bottom" id="col{{i.product.id}}">
<div class="col-md-3 text-center " >
<i class="far fa-times-circle cncl_icn" id="cross{{i.product.id}}" style="font-size: 30px;"></i>
<img class="mt-4" src="/media/{{i.image}}" alt="check ur internet!" height="150px">
<h4 class="ml-5" style="color: black;">{{i.product.name}}</h4>
<p class="ml-5">Size:{{i.product.size}} , color:{{i.product.color}}</p>
</div>
<div class="col-md-3 text-center mt-5">
{%if i.total_price < i.product.price%}
<del style="font-weight: bold; color: grey;" >${{i.product.price}}</del> $<p class="d-inline" style="font-weight: bold;" id="price{{i.product.id}}">{{i.total_price}}</p>
{% else %}
$<p class="d-inline" style="font-weight: bold;" id="price{{i.product.id}}">{{i.product.price}}</p>
{% endif %}
</div>
<div class="col-md-3 text-center">
<div class="form-group mt-4">
<div class="input-group">
<div class="input-group-btn ">
<button id="down" class="btn btn-default" onclick="change_quan('{{i.product.id}}','minus')" style="font-size: 25px;background: none;border: none;font-weight: bold;">-</button>
</div>
<input type="number" id="cart{{i.product.id}}" class="form-control text-center pt-3" value="{{i.quantity}}" style="width: 30px;border: none;font-weight: bold;background: none;">
<div class="input-group-btn">
<button id="up" class="btn btn-default" onclick="change_quan('{{i.product.id}}','plus')" style="font-size: 25px;background: none;border: none;font-weight: bold;">+</button>
</div>
</div>
</div>
</div>
<div class="col-md-3 mt-5 text-center">
{%if i.total_price < i.product.price %}
$<p class="d-inline" style="font-weight: bold;" id="total{{i.product.id}}">{{i.total_price}}</p>
{% else %}
$<p class="d-inline" style="font-weight: bold;" id="total{{i.product.id}}">{{i.product.price}}</p>
{% endif %}
</div>
</div>
<script>
$(function() {
$("#cross{{i.product.id}}").hover(function() {
$("#cross{{i.product.id}}").toggleClass("fas fa-times-circle").toggleClass("far fa-times-circle")
})
// to remove product from cart
$("#cross{{i.product.id}}").confirm({
title: 'Confirm',
content: 'Are you sure to remove this product from cart',
theme: 'modern',
buttons:{
confirm: function() {
$('#col{{i.product.id}}').remove()
},
cancel: function (){}
}
})
})
</script>
{% endfor %}
</div>
<script>
function grandTotal(){
$.ajax({
url:"{% url 'get_cart_data' %}",
type:'get',
success:function(data){
p = Math.round((data.offer/data.total)*100,2)
$('.item_total').html("&dollar;"+data.total)
$('#offer').html("&dollar;"+data.offer)
$('#per').html("("+p+"%)")
$('#quantity').html(data.quan)
c = (data.total)-(data.offer)
$('#grand_Total').html("&dollar;"+c)
}
})
}
grandTotal()
function change_quan(id,action){
let old = $("#cart"+id).val();
quan = 0
if(action=="plus"){
quan+=parseInt(old)+1
$('#total'+id).text( parseFloat($('#total'+id).text()) + parseFloat($('#price'+id).text()))
}
else{
quan+=parseInt(old)-1
$('#total'+id).text( parseFloat($('#total'+id).text()) - parseFloat($('#price'+id).text()))
}
$("#cart"+id).val(quan);
$.ajax({
url:"{% url 'change_quan' %}",
type:"get",
data:{cid:id,quantity:quan},
success:function(data){
alert(data)
}
});
}
</script>
<div class="col-md-5 text-center py-5" style="background-color: rgba(255, 176, 218, 0.397);">
<div id="cartt"></div>
<div class="row">
<img src="/static/Images/estore1.png" alt="" height="300px" style="margin: auto;">
</div>
<div class="pb-3 " style="font-size:30px;font-weight: bold;">--------------------</div>
<h4 class="pt-3" style="font-family: Arial, Helvetica, sans-serif;letter-spacing: 3px;text-transform: uppercase;">Total: <span style="font-size: 28px;" class="item_total"></span></h4>
<h4 class="pt-1" style="font-family: Arial, Helvetica, sans-serif;letter-spacing: 3px;text-transform: uppercase;">Quantity: <span style="font-size: 28px;" id="quantity"></span><span style="text-transform: none;"> Items</span></h4>
<h4 class="pt-1" style="font-family: Arial, Helvetica, sans-serif;letter-spacing: 3px;text-transform: uppercase;">You Saved: <span style="font-size: 28px;" id="offer"></span><span class='text-success'style="font-size: 20px;" id="per"></span></h4>
<h4 class="py-1" style="font-family: Arial, Helvetica, sans-serif;letter-spacing: 3px;text-transform: uppercase;">Grand Total: <del style="font-size: 25px; color:grey;" class="item_total"></del><span style="font-size: 28px;" id="grand_Total"></span></h4>
<h4 class="pt-3">Shipping charges will calculated at checkout</h4>
<form class="pt-3" action="" >
<!-- <input type="text" placeholder="Coupon code.." name="cod" class="mt-3 text-center" style="letter-spacing: 2px;font-size: 20px;border-radius: 25px;width: 250px;height: 47px;background-color: rgb(255, 255, 255);border:2px solid thistle;" >
<input type="submit" class="mt-3" value="Apply Code"name="acd" style="letter-spacing: 2px;font-size: 25px;border-radius: 25px;border: none;width: 250px;height: 45px;background-color: rgb(161, 158, 158);color: rgb(255, 255, 255);" > -->
<input type="submit" value="CHECKOUT" name="che" class="mt-5" style="letter-spacing: 2px;font-size: 25px;border-radius: 25px;border: none;width: 250px;height: 45px;background-color: black;color: rgb(255, 255, 255);" >
</form>
</div>
</div>
{% endif %}
</div>
{% endif %}
{% endblock %}
if data does not exist 'get_object_or_404' will throw 404 error, As per your request You are trying to retrieve data with primary key 1, but data is not available
That’s why you get this error. so please check you table or try with other pk value
def change_quan(request):
qty = request.GET["quantity"]
cid = request.GET["cid"]
print(request.GET)
cart_obj = get_object_or_404(cart,id=cid) # please check this cid value
cart_obj.quantity = qty
cart_obj.save()
return HttpResponse(1)
get_object_or_404 is not the correct choice here. Since object with id=cid was not found in database, 404 error was raised. This is the expected behaviour of get_object_or_404.
Did you mean to use get_or_create object incase the object that is trying to be fetched from database is not found?

only getting a few attributes from HTML code and not all of them using Beautifulsoup Python

names = []
for code in soup.find_all('li'):
a_tag = code.find("a")
if a_tag is not None and 'title' in a_tag.attrs:
l = a_tag.get('title')
names.append(l)
time.sleep(1)
print(names)
When I run the script, it returns only a few names (e.g. title attributes) out of 30 or so and all tags contain the title attribute.
Thank you!
Here's the html code for the one that worked:
<li class="wo9IH">
<div class="uu6c_">
<div class="t2ksc">
<div class="RR-M- h5uC0 SAvC5" role="button" tabindex="0">
<canvas class="CfWVH" height="40" width="40" style="position: absolute; top: -5px; left: -5px; width: 40px; height: 40px;"></canvas>
<span class="_2dbep " role="link" tabindex="0" style="width: 30px; height: 30px;"><img alt="damla_dx's profile picture" class="_6q-tv" src="https://scontent-hbe1-1.cdninstagram.com/v/t51.2885-19/s150x150/100947324_584513555780923_3392957389983449088_n.jpg?_nc_ht=scontent-hbe1-1.cdninstagram.com&_nc_ohc=cpbHm-9Tg24AX-Y5ZTo&oh=523572e76dc634c387c1bce8f5ee24fd&oe=5EF8F269"></span>
</div>
<div class="enpQJ">
<div class="d7ByH"><a class="FPmhX notranslate _0imsa " title="damla_dx" href="/damla_dx/">damla_dx</a></div>
<div class="wFPL8 ">𝒟𝒶𝓂𝓁𝒶</div>
</div>
</div>
<div class="Pkbci"><button class="sqdOP L3NKy y3zKF " type="button">Follow</button></div>
</div>
</li>
and here's the code for the one that didn't:
<li class="wo9IH">
<div class="uu6c_">
<div class="t2ksc">
<div class="RR-M- SAvC5" role="button" tabindex="0">
<canvas class="CfWVH" height="40" width="40" style="position: absolute; top: -5px; left: -5px; width: 40px; height: 40px;"></canvas>
<a class="_2dbep qNELH kIKUG" href="/connie_mario/" style="width: 30px; height: 30px;"><img alt="connie_mario's profile picture" class="_6q-tv" src="https://scontent-hbe1-1.cdninstagram.com/v/t51.2885-19/s150x150/25016555_1962725540720404_7523275851970904064_n.jpg?_nc_ht=scontent-hbe1-1.cdninstagram.com&_nc_ohc=AvK0clN2PSMAX-detNw&oh=6184a0c465a9bfcd04617d134cde4fe9&oe=5EFA793D"></a>
</div>
<div class="enpQJ">
<div class="d7ByH"><a class="FPmhX notranslate _0imsa " title="connie_mario" href="/connie_mario/">connie_mario</a></div>
<div class="wFPL8 ">👑Connie_ Mario👑</div>
</div>
</div>
<div class="Pkbci"><button class="sqdOP L3NKy y3zKF " type="button">Follow</button></div>
</div>
</li>
You can do something simpler with css selctors:
for artist in code.select('a[title]'):
print(artist.text)
For the two snippets in your question, the output should be:
connie_mario
damla_dx

Bootstrap 3 display 3 blog posts in each row using in Django templates

I'm working on a project using Django(2.1.7) and Bootstrap (3.1), I need to display 3 blog posts in each row:
Note: I have taken a look at various related questions but couldn't find any solution specific to my problem, so don't mark this question as duplicated, please!
here what I have tried:
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="col-lg-9">
<div class="row">
{% for post in posts %}
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="{{ post.photo.url }}"
alt="..." class="img-fluid card-img-top"></a>
<div class="card-body"><a href="{% url 'blog-post' post.id %}"
class="text-uppercase text-muted text-sm letter-spacing-2">{{ post.category }} </a>
<h5 class="my-2">{{ post.title }}</h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>{{ post.created_at }}</p>
<p class="my-2 text-muted text-sm">{{ post.content }}</p><a
href="{% url 'blog-post' post.id %}" class="btn btn-link pl-0">Read more<i
class="fa fa-long-arrow-alt-right ml-2"></i></a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-lg-3" style="background-color: darkgrey; height: 100%">
<div class="container">
<form class="form" style="margin-top: 3%">
<input type="search" name="search" />
<button type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</div>
And here's the css for some of these elements:
.card-img-top {
width: 100%;
border-top-left-radius: calc(.4rem - 1px);
border-top-right-radius: calc(.4rem - 1px);
}
img {
vertical-align: middle;
border-style: none;
}
.img-fluid {
max-width: 100%;
height: auto;
max-height: 200px;
min-height: 200px;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
#media (min-width: 992px){
.col-lg-4 {
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
max-width: 33.33333%;
}
}
.h-100 {
height: 100% !important;
}
.shadow {
box-shadow: 0 0 1rem rgba(0,0,0,0.15) !important;
}
.border-0 {
border: 0 !important;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,0.125);
border-radius: .4rem;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -12px;
margin-left: -15px;
}
In safari inside the first row, it's displaying only 2 blog posts but in other rows, it's displaying 3 blog posts, See the screenshot below:
Update: Below is the generated HTML, taken from browser:
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/automation_image.jpg" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body">Travel
<h5 class="my-2">This is the First Blog</h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:11 a.m.</p>
<p class="my-2 text-muted text-sm">This is the very first blog.</p>Read more<i class="fa fa-long-arrow-alt-right ml-2"></i>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/freelance-dev-business.png" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body">DEFAULT
<h5 class="my-2">Second Blog Post</h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:14 a.m.</p>
<p class="my-2 text-muted text-sm">This is the second one.</p>Read more<i class="fa fa-long-arrow-alt-right ml-2"></i>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/machine-learning-apprentissage-supervise-ou-non-et-par-renforcement-hli-lab.jpg" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body">LIVING
<h5 class="my-2">Third Post</h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:12 a.m.</p>
<p class="my-2 text-muted text-sm">This is the third blog post.</p>Read more<i class="fa fa-long-arrow-alt-right ml-2"></i>
</div>
</div>
</div>
</div><!-- close existing row and open another one-->
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/skills.jpg" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body">Support
<h5 class="my-2">Another One</h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:12 a.m.</p>
<p class="my-2 text-muted text-sm">This is another one.</p>Read more<i class="fa fa-long-arrow-alt-right ml-2"></i>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/JobExpert.jpg" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body">Medical
<h5 class="my-2">Fifth</h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 7:43 a.m.</p>
<p class="my-2 text-muted text-sm">This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.</p>Read more<i class="fa fa-long-arrow-alt-right ml-2"></i>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/IMG_1832.jpg" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body">Support
<h5 class="my-2">Sixth</h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:12 a.m.</p>
<p class="my-2 text-muted text-sm">This is the sixth blog post here at BRT site.</p>Read more<i class="fa fa-long-arrow-alt-right ml-2"></i>
</div>
</div>
</div>
</div><!-- close existing row and open another one-->
<div class="row">
</div>
</div>
what can be wrong here? I'm new to Bootstrap.
Thanks in advance!
Try this one.
<div class="row">
{% for post in posts %}
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="{{ post.photo.url }}"
alt="..." class="img-fluid card-img-top"></a>
<div class="card-body"><a href="{% url 'blog-post' post.id %}"
class="text-uppercase text-muted text-sm letter-spacing-2">{{ post.category }} </a>
<h5 class="my-2">{{ post.title }}</h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>{{ post.created_at }}</p>
<p class="my-2 text-muted text-sm">{{ post.content }}</p><a
href="{% url 'blog-post' post.id %}" class="btn btn-link pl-0">Read more<i
class="fa fa-long-arrow-alt-right ml-2"></i></a>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:3 %}
</div><!-- close existing row and open another one-->
<div class="row">
{% endif %}
{% endfor %}
</div>

Categories