Please help me to resolve this issue:
my_image class in custom.css is not reflecting in the product.html file. I'm unable to resolve this issue. class="my_image" in product.html is not taking the alteration that I have provided in the custom.css
custom.css
.my_image{
width:100%;
height:auto;
padding:10px;
}
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="discription" content="{% block metadiscription %} {% endblock %}">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<div class="container">
{% include 'header.html' %}
{% include 'navbar.html' %}
{% block content %}
{% endblock %}
{% include 'footer.html' %}
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</div>
</body>
</html>
catagory.html
{% extends 'base.html' %}
{% load static %}
{% block metadiscription %}
{% if catagory %}
{{catagory.description|truncatewords:155 }}
{% else %}
welcome
{% endif %}
{% endblock %}
{% block title %}
{% if catagory %}
{{catagory.name}}--ABC store
{% else %}
see our new collection
{% endif %}
{% endblock %}
{% block content %}
{% if catagory %}
<div>
<div class="row my_row_class">
<div class="mx_auto">
OUR PRODUCT COLLECTION
</div>
</div>
</div>
{% endif %}
<div>
{% if catagory %}
<img class="center" src="{{catagory.image.url}}" alt="{{catagory.name}}" height="200px">
</div>
<div>
<h1 class="text-center my_title">
{{catagory.name}}
</h1>
<p class="text-center text-justify">
{{catagory.description}}
</p>
</div>
{% else %}
<div>
<img class="my_image_padding" src="{% static 'img/banner.png' %}" height="300px" width="1300px">
</div>
<br>
<div>
<h1 class="text-center">OUR PRODUCT COLLECTION</h1>
<p class="text-justify"></p>
</div>
{% endif %}
<div class="container">
<div class="row mx_auto">
{% for product in products.object_list %}
<div class="my_bottom_margin col-12 col-sm-12 col-md-12 col-lg-4">
<div class="card text-center mb-3 shadow" style="min-width:18rem;">
<img class="card-img-top my_image" src="{{product.image.url}}"alt="image not found" height="100px">
<div class="card-body">
<h4>{{product.name}}</h4>
<p>{{product.price}}</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="mx_auto">
{% if products.paginator.num_pages > 1 %}
<hr>
<div class="text-center">
{% for pg in products.paginator.page_range %}
{{pg}}
{% endfor %}
</div>
{% endif %}
</div>
<br>
</div>
{% endblock %}
product.html
{% extends 'base.html' %}
{% load static %}
{% block metadiscription %}
{{product.description|truncatewords:155 }}
{% endblock %}
{% block title %}
{{product.name}}--ABC store
{% endblock %}
{% block content %}
<div class="row my_product_row_class">
<div class="mx_auto">
<p> Home | {{product.catagory}}|{{product.name}}</p>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div>
<img class="my_image" src="{{product.image.url}}" alt="{{product.name}}">
</div>
</div>
<div class="col-md-6">
<div >
<h1 class="my_prod_title">{{product.name}}</h1>
<p>Rs {{product.price}}</p>
<p>Product description</p>
<p class="text-justify my_prod_text">{{product.description}}</p>
{% if product.stock <= 0 %}
<p class="text-justify my_prod_text"><b>OUT OF STOCK</b></p>
{% else %}
<a class="btn btn-secondary" href="">ADD TO CART</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
The problem is that you have other styles the override your custom style. Try adding the style directly in your HTML file above the element you want to affect and add the CSS !important rule to the properties.
Example
<style>
.my_image{
width:100%!important;
height:auto!important;
padding:10px!important;
}
</style>
<div class="my_image"></div>
This could be a specificity issue with your CSS, in that you may have other styles with a higher specificity overriding your custom styling.
Using the inspector tools in the browser would help you see if this is the issue - https://courses.cs.washington.edu/courses/cse154/19su/resources/assets/debugging/chrome-inspector.html
If this is the case, try making the "my_image" class more specific than the styles you are trying to overwrite:
HTML:
<div class="col-md-6 text-center my_image-wrapper">
<div>
<img class="my_image" src="{{product.image.url}}" alt="{{product.name}}">
</div>
</div>
CSS:
<style>
.my_image-wrapper .my_image{
width:100%!important;
height:auto!important;
padding:10px!important;
}
</style>
Related
my login form is not looking good, it's too wide. how to make it smaller and center in the middle of the page?
signin html:
{% extends "accounts/_base.html" %}
{% block title %}
Sign In
{% endblock %}
{% block control %}
<form class="form-signin" action="{% url 'login' %}" method="post">
{% csrf_token %}
<h2 class="form-signin-heading">Sign In</h2>
<div class="form-group">
<div class="fieldWrapper">
{{ form.username.errors }}
{{ form.username.label_tag }}
{{ form.username }}
</div>
<div class="fieldWrapper">
{{ form.password.errors }}
{{ form.password.label_tag }}
{{ form.password }}
</div>
</div>
<label for="signIn" class="sr-only">Click</label>
<button id="signIn" class="btn btn-lg btn-primary btn-block" >Sign In</button>
</form>
<form class="form-signin" action="{% url 'signup' %}">
<button id="signUp" class="btn btn-lg btn-default btn-block">Sign up now!</button>
</form>
{% endblock %}
base html:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta CharacterSet='UTF-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block script %}{% endblock %}
</head>
<body>
<!-- head -->
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mb-0" href="#">Pizza</a>
</div>
{% if user is not none %}
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{% block nav_list %}{% endblock %}
</ul>
<form class="navbar-form navbar-right" action="{% url 'logout' %}" method="get">
<span>Welcome, {{ user }}. </span>
<button id="logout" class="btn btn-default btn-sm">Log out</button>
</form>
</div>
{% endif %}
</div>
</nav>
<!-- body -->
<div class="container" id="elem_cont">
{% if message is not none %}
<div class="alert alert-{{ message.0 }} alert-dismissable">{{ message.1 }}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endif %}
{% block control %}
{% endblock %}
</div>
<div class="container" id="elem_disp">
{% block disp %}
{% endblock %}
</div>
<div class="container" id="elem_misc">
{% block misc %}
{% endblock %}
</div>
<!-- footer -->
<nav class="navbar navbar-fixed-bottom" id="nav_footer" role="navigation">
<div class="container" id="elem_foot">
<footer class="navbar" id="footer">
<hr>
{% block botm_cont %}
{% endblock %}
<p>© 2019 madlogos</p>
</footer>
</div>
</nav>
</body>
</html>
This is a styling issue for css.
You already have a css file referred to in your template (css/style.css), so you can add a style like the following to it. This will apply the style only to the form with the class form-signin:
form.form-signin {
max-width: 64ch;
margin: auto;
}
64ch is a good width for readability if there's a body of text, but you can tweak if it's not quite where you want the form on your page.
margin: auto will automatically handle the distances between the form and its containing div.
Don't forget to test at a variety of screen sizes. You may want to add a min-width value as well if you have other text on the page.
The lightgallery is working but with one big issue with it. it is not shown the image where it shows that in the thumbnail but the main window it is black.
The lightgallery is working but with one big issue with it. it is not shown the image where it shows that in the thumbnail but the main window it is black.
enter image description here
$(document).ready(function() {
$('#lightgallery').lightGallery({
mode: 'slide',
download: false,
});
});
{% extends "keeraapp/base.html" %}
{% load static %}
{% block title %}{{ object.topic }}{% endblock %}
{% block content %}
<script src="{% static 'keeraapp/javascript/jquery.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/gallery.js' %}"></script>
<script src="{% static 'keeraapp/javascript/lightgallery.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/picturefill.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/lg-thumbnail.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/lg-fullscreen.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/DeletingConfirmation.js' %}"></script>
<link rel="stylesheet" href="{% static 'keeraapp/css/lightgallery.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'keeraapp/css/one-topic.css' %}" type="text/css">
<input class="declare_checkbox" name="declare_checkbox" id="declare_checkbox" type="checkbox" value= "agree">
<label for="declare_checkbox">
<a class="declare-label">أتعهد بدفع قيمة خدمة هذا الموقع في حال تم التأجير وتقدر بـ 1% من السعر</a></label>
<div class="inner-body" id="inner-body">
<P><center><b><h2>{{ object.topic }}</h2></b></center></P>
<P><center><h5>{{ object.date }}</h5></center></P>
<center><div class="warper-flex">
<div class="country">{{ object.country }}</div>
<div class="city">{{ object.city }}</div>
<div class="neighborhood">{{ object.neighborhood }}</div></br>
<div class="category">{{ object.category }}</div>
<div class="sub_category">{{ object.sub_category }}</div>
<div class="sub_sub_category">{{ object.sub_sub_category }}</div>
</br>
</div></center></br>
<center><div id="lightgallery">
{% for image in images %}
<a href="{{image.image.url}}">
<img src="{{ image.image.url }}" alt="image" width="250px" height="150px">
</a>
{% endfor %}
</div></center>
<center><div class="price-detail">قيمة الإيجار هي <span>{{ object.price| stringformat:'d'}}</span> ويسترد التأمين ومقداره <span>{{ object.insurance|stringformat:'d'}}</span> اذا تم الإرجاع بحالة جيدة</div></center>
<P class="description">{{ object.description}}</P>
<form class= 'new-comment-form'
method='post'>
{% csrf_token %}
<input id="topic_id" name="topic_id" type="hidden" value="{{topic.id}}">
{{comment_form.non_field_errors}}
<p>{{ comment_form.comment }}</p>
{% if request.user is authenticated %}
<p>{{ comment_form.comment }}</p>
{% endif %}
<div class="warp">
<button class="button" id="submit">أرسل</button>
</div>
</form>
<div>
<p>{{ comments.count }} تعليقات</p>
{% for comment in comments %}
<div class="comment-section"><p>{{ comment.comment }} </p></div>
<small><p>بواسطة {{ comment.owner|capfirst }} | منذ {{comment.date|timesince}}</p></small>
{% if request.user == comment.owner %}
<div class="delete" id="delete">
حذف
</div>
{% endif %}
{% endfor %}
</div>
</div>
{%endblock content %}
I've been able to add images to my post with ckeditor which is great but I can't seem to get the images to shrink and be responsive like the rest of the content/text in my post. I've tried a few tutorials and played around with things but nothing seems to work. Thanks.
Here is my BASE.HTML
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'portfolio_app/main.css' %}">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Davi Silveira DoP</title>
</head>
<body>
<main role="main">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p class="text-muted">Davi Silveira © 2020</p>
<p>Associated with Silveira Brothers Films</p>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
BLOG.HTML
{% extends "portfolio_app/base.html" %}
{% block content %}
<div class="container">
<div class="row">
<div class="jumbotron content-section">
<small class="text-muted">
"Look at the natural light, when it's right and when it's beautiful. Don't mock with it, just use it as it is. If you must make any change, make it deliberately, make it delicately." -Douglas Kirkland
</small>
</div>
</div>
</div>
{% for post in posts %}
<div class="container">
<div class="col-md-12">
<article class="content-section">
<img class="rounded-square article-img" src="{{ post.author.profile.image.url }}">
<div class="body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted|date:'F d, Y' }}</small>
</div>
<h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title|safe }}</a></h2>
<p class="article-content">{{ post.content|safe|truncatewords:30 }}</p>
</div>
</article>
</div>
</div>
{% endfor %}
<div class="container">
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
</div>
{% endblock content %}
POST_DETAIL.HTML
{% extends "portfolio_app/base.html" %}
{% block content %}
<div class="py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<article class="content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}">
<div class="body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:'F d, Y' }}</small>
{% if object.author == user %}
<div>
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update Post</a>
<a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete Post</a>
</div>
{% endif %}
</div>
<h2 class="article-title">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
</div>
</div>
</div>
</div>
{% endblock content %}
POST_FORM.HTML
{% extends "portfolio_app/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container col-md-6">
<div class="content-section">
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom md-4">Blog Post</legend>
{{ form.media }}
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Post!</button>
</div>
</form>
</div>
</div>
</div>
{% endblock content %}
What am I missing..? Thank you again for your help.
How can I fix this problem without removing the bootstrap template tags?
Context:
I have the following template schema:
layout.html is my base template
And I have another templates which inherit from layout.html
I am using third party package application django-bootstrap3
My layout.html is:
(The divs amount of navbar and django variables templates does not matter - are just for demonstration)
{% load staticfiles %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<html lang="es">
{% block head %}
<head>
<title>{% block title_tag %}My APP{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
{% endblock %}
<body>
<div class="wrapper">
<!-- Nav menu -->
<header>
{% if request.user.is_authenticated %}
{% if userprofile %}
<div class="profile-options">
{% comment %} Begin settings drowdown {% endcomment %}
<div class="name-options-cont">
<div class="name">
<p>{{ userprofile.user.email }} - {{ userprofile.user.enterprise_name }}</p>
</div>
<div class="options">
<div class="drop-down">
<ul>
<li><a href="{% url 'some-url' %}" >Some option</a></li>
<li><a href="{% url 'some-url2' %}" >Some option2</a></li>
<li>Exit</li>
</ul>
</div>
</div>
</div>
</div>
{% endif %}
{% else %}
<div class="registration">
RegistrarseIniciar sesión
</div>
{% endif %}
</header>
<div class="container">
{% if messages %}
{% for message in messages %}
<div class='alert {% if "success" in message.tags %}alert-success{% elif "warning" in message.tags%}alert-
warning{% elif "error" in message.tags %}alert-danger{% endif %} alert-dismissible' role='alert'>
<!-- Boton para cerrar el alert-->
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!--End Boton para cerrar el alert
Haciendo uso del Django messages framework-->
{% if "safe" in message.tags %}{{ message|safe }}{%else%}{{ message }}{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
{% block body_content %}
{% endblock body_content %}
</div>
<footer>
</footer>
</body>
</html>
My article_detail.html template inherits from layout.html.
In this template I am retrieving an object information in Django, and rendering the specific information of an article post.
In the layout.html the divs amount and django variables templates does not matter - are just for demonstration
{% extends "layout.html" %}
{% load bootstrap3 %}
{% load staticfiles %}
{% block body_content %}
<!-- Right column -->
<div class="search-column">
<div class="post-column">
<div class="info">
<div class="icon">
<img src="{% static 'img/icons/info.svg' %}" alt="">
<span>Información</span>
</div>
<div class="autor">
<p class="title">Autor</p>
<div class="profile">
<div class="img-cont">
<a href="#">
{% if instance.author.avatar%}
<img src="{{ instance.author.avatar.url }}" alt="">
{% else %}
<img src="{% static 'img/default_profile_pic.png' %}" class="img-responsive">
{% endif %}
</a>
</div>
<div class="name-review-cont">
{% comment %} A quien corresponda {% endcomment %}
<a href="#">
{% if instance.author.get_long_name %}
<span>{{ instance.author.get_long_name }}</span>
{% endif %}
{% if instance.author.get_enterprise_name %}
<span>{{ instance.author.get_enterprise_name }} (#{{ instance.author.email }})</span>
{% endif %}
</a>
<p><div class="fb-like" data-href="{{ request.build_absolute_uri }" data-layout="standard"
data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
</p>
<hr/>
{% comment %}
<img src="{% static 'img/stars.svg' %}" alt="">
<div class="average">
<span>546</span>
<span>valoraciones</span>
</div>
{% endcomment %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End right column-->
<!-- Main content -->
<main>
<div class="blog-body">
{% if instance.image %}
<img src="{{ instance.image.url }}" class="img-responsive">
{% endif %}
<div class="title-cont">
<h1>{{ title }} <small>{% if instance.draft %}<span style='color: red'> Borrador</span> {% endif %}{{ instance.publish }}</small> </h1>
{% comment %}
{% if instance.author.has_perm %}
{{ instance.author.has_perm }}
{% endif %}
{% endcomment %}
{% comment %} <h1>{{ title }} <small>{{ instance.timestamp|timesince }}</small> </h1>{% endcomment %}
</div>
<div class="main-text">
{{ instance.content|linebreaks }}<br/>
</div>
</div>
</main>
<!-- End main content -->
{% endblock %}
When I go to the article detail view via browser, I found at design level of following:
I have been checking in Inspect elements and I think (I don't know if I am in right) that there is a <div class="container"> .. </div> element which override this visual space in blank:
I think this in relation that if will does not this <div class="container"> .. </div> element my blue section code, would be located properly and not so far down the page.
This <div class="container"> .. </div> element is brought by django-bootstrap3 which I am using, such as follow in the following picture:
If I go to my layout.html template mentioned previously above, and I remove the following template tags bootstrap related:
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
and refresh my article_detail.html in the browser, the visual space blank is fixed
I am creating a couple pages for my website by extending a base.html template that I made. I want to be able to put bootstrap forms on some of the pages, but when I have the {% bootstrap_form formname %} tag inside the {% block content %} tag I get an error: Invalid block tag: 'bootstrap_form', expected 'endblock'.
Does anyone know how to put bootstrap tags inside of a template block??
My base.html:
<html>
<head>
<title>{% block title %}CYGNSS SIMPL{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
<div class="container">
<img class="img-responsive center-block" src="{% static "images/logo.png" %}" alt="Picture"/>
</div>
{% block footer %}{% endblock %}
</body>
</html>
My template:
{% extends "InterfaceApp/base.html" %}
{% block title %}Request Generator{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>
<p class="text-center">Such Request Generator</p>
</h1>
</div>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
<p class="text-center">
Generate a Request.
</p>
</div>
<div class="container-fluid">
<form action="/InterfaceApp/Manual_Request/" method="post" class="form" onsubmit="return checkForm( this )">
{% csrf_token %}
<div class="panel-body text-center">
<table class="table-responsive centering">
<tbody>
<tr>
<td>
{% bootstrap_form form_length %}
</td>
</tr>
</tbody>
</table>
<br>
<table class="table-responsive centering">
<tbody>
<tr>
{% buttons %}
<td>
<button type="submit" class="btn btn-primary center-block" value="Submit">
{% bootstrap_icon "fire" %} Generate Manual Request
</button>
</td>
{% endbuttons %}
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
Any help is much appreciated!
#AjayGupta answer worked for me. I did pip install django-bootstrap-toolkit, added 'bootstrap-toolkit to my INSTALLED_APS and then included {% load bootstrap_toolkit %} at the tope of my templates.