What I have:
What I want:
I would like to have the input centered on the page and have the label sit to the left of it using bootstrap 4 if possible. I think I might need to offset or pull the columns, but it seems justify-content center ignores any pull or offset class.
HTML (Django):
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{% for field in form %}
<div class="row my-4 justify-content-center">
<div class="col-2 float-right text-right">
{{ field.label }}
</div>
<div class="col-4 float-left">
<div class="accountFieldWrapper">
{{ field|add_class:"form-control w-100" }}
</div>
</div>
</div>
{% endfor %}
<div class="row my-4 justify-content-center">
<button class="primaryAction btn btn-dark" type="submit">{% trans "Sign In" %}</button>
</div>
<div class="row my-4 justify-content-center">
<a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
</div>
</form>
Related
I have a recaptcha on a form that I am using and would like any potential error messages to appear directly underneath. Currently the error message appears to the right of the recaptcha. How do I fix this?
<div class="col-sm col-md-3 d-flex align-items-center contact-form">
<div style="margin-right: 10px;" class="g-recaptcha" data-sitekey="my-key"></div>
{% if messages %}
{% for message in messages %}
<div style="position: relative;">
<p class="error-message" style="bottom: 10px;">{{ message }}</p>
</div>
{% endfor %}
{% endif %}
</div>
<div class="col-sm col-md-3 d-flex align-items-center contact-form">
<button class="download-btn" type="submit">Get In Touch With Us</button>
</div>
</div>
I tried making the recaptcha position absolute and the div above it relative but for some reason the recaptcha stays absolute and doesn't move when the page size changes.
I am very beginner at django, And fall onto this error MultiValueDictKeyError, I've got this error earlier, And I solved it after adding the name tag to HTML file, but this time I am not able to figure it out. please help me fix this error
views.py
from django.shortcuts import render
from .models import Post
# Create your views here.
def main(request):
return render(request, "blog/index.html", {"Posts":Post.objects.all()})
def viewpost(request, pk):
return render(request, "blog/viewpost.html", {"Posts":Post.objects.get(id = pk)})
def search(request):
if request.method == "GET":
search = request.GET["search"]
for post in Post.objects.all():
if search in post.Title:
return render(request, "blog/search.html")
else:
return render(request, "blog/search.html", {
"message": "Not Found"
})
Index.html I am sorry this file is quite too big but its on the third block. I have commented out that block.
{% extends 'blog/layout.html' %}
{% load static %}
{% block body %}
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<h1 class="my-4">Page Heading
<small>Secondary Text</small>
</h1>
<!-- Blog Post -->
{% for post in Posts %}
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">{{ post.Title }}</h2>
<p class="card-text">{{ post.Description }}</p>
Read More →
</div>
<div class="card-footer text-muted">
Posted on {{ post.Date }} by
{{ post.Author }}
</div>
</div>
{% endfor %}
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
**<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<form action="{% url 'search' %}" method="GET">
{% csrf_token %}
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." name="search">
<span class="input-group-append">
<button class="btn btn-secondary" type="button" >Go!</button>
</span>
</div>
</form>**
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
{% endblock %}
urls.py
from django.urls import path, include
from . import views
urlpatterns = [
path('',views.main, name = 'main'),
path('viewpost/<int:pk>/', views.viewpost, name = 'viewpost'),
path('search/', views.search, name = 'search'),
]
search.html
{% extends 'blog/layout.html' %}
{% load static %}
{% block body %}
<div class="card" style="width: 70vw; margin-left: auto; margin-right: auto; margin-top: 20px; ;">
<div class="card-body">
<h2 class="card-title">Search Results:</h2>
{% for post in posts %}
<h3 class="card-subtitle" style="margin-top: 30px;"><a href="#}" >{{ post.title }}</a></h3>
<p class="card-text" style="margin-left: 1px;">{{ post.description }}</p>
<hr>
{% endfor %}
</div>
</div>
{% endblock %}
You need to change your views and template like this.
Change button type tosubmit and you don't need csrf token in the GET request.
<form action="{% url 'search' %}" method="GET">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." name="search">
<span class="input-group-append">
<button class="btn btn-secondary" type="submit">Go</button>
</span>
</div>
</form>**
Now in the views
First get the search query parameter then filter all the posts containing that query using __icontains and return the results to the template in a context
def search(request):
search = request.GET.get ('search', '')
posts = Post.objects.filter(title__icontains=search)
return render(request, "blog/search.html", {'posts':posts})
I have a parent div where children div are added. I use pagination set to five.
On large screen everything is fine but on smaller device (14.00-inch display that has a resolution of 1920x1080 pixels) the children divs are overlaying the parent div at the bottom.
The whole height of the children div can differ depending on how many children div are displayed (1,2,3,4 or 5)
This is the CSS of my parent div:
header.nav_masthead {
padding-top: 6.5rem;
background-color: #345a61;
background-size: cover;
background-position: center;
background-image:;...;
}
The div where the children div are added:
<div id='fav_list' class="w-75 mx-auto" style='background-color: transparent; height: auto;'>
This is my page HTML:
{% block content %}
<header class="masthead" >
<div class="col-lg-12">
<h2 class="intro-text text-center" style="color: beige;">Bienvenue sur ton compte {{ user }}</h2>
<hr class="divider1 my-4" />
<div class='w-75 mx-auto row d-flex justify-content-around mb-3'>
<h3 class="intro-text text-center account_items" style="color: beige;">Produit recherché</h3>
<h3 class="intro-text text-center account_items" style="color: beige;">Produit de substitut</h3>
</div>
</div>
<div id='fav_list' class="w-75 mx-auto" style='background-color: transparent; height: auto;'>
{% for saved in saved_list %}
<div class='row d-flex justify-content-between'>
<div class="card mb-3" style="width: 49%;">
<div class="row no-gutters">
<div class="col-md-2 my-auto">
<img class="mx-auto d-block" style="width:auto; height:auto; max-width:100px; max-height:100px; "
src="{{ saved.original_product.picture }}">
</div>
<div class="col-md-10">
<div class="card-body">
<h5 class="card-title"><a href="{% url 'finder:detail' saved.original_product.id %}"
class="aaccount">{{ saved.original_product.real_name }}/ {{ saved.original_product.real_brand }}</a>
</h5>
<img src="/static/finder/img/nutriscore-{{ saved.original_product.nutrition_grade}}.svg"
style="width:70px;"><br>
</div>
</div>
</div>
</div>
<div class="card mb-3" style="width: 49%;">
<div class="row no-gutters">
<div class="col-md-2 my-auto">
<img class="mx-auto d-block " style="width:auto; height:auto; max-width:100px; max-height:100px; "
src="{{ saved.sub_product.picture }}">
</div>
<div class="col-md-9">
<div class="card-body">
<h5 class="card-title"><a href="{% url 'finder:detail' saved.sub_product.id %}"
class="aaccount">{{ saved.sub_product.real_name}}/ {{ saved.sub_product.real_brand }}</a>
</h5>
<img src="/static/finder/img/nutriscore-{{ saved.sub_product.nutrition_grade}}.svg"
style="width:70px;"><br>
</div>
</div>
<div class="col-md-1 my-auto mx-auto">
<button type ='button' class=' btn substitut' value='{{ saved.id }}'>{% csrf_token %}<i class='fas fa-trash-alt'></i></button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</header>
<div id='navigation'>
{% if paginate %}
<div style="background-color: #E8A75D; overflow: auto; ">
<div class="clearfix"></div>
{% for i in page_range %}
{% if i == 1%}
<span><button class='btn nav_button first ' value='{{ i }}'>{{i}}</button></span>
{% else %}
<span><button class='btn nav_button ' value='{{ i }}'>{{i}}</button></span>
{% endif %}
{% endfor %}
{% endif %}
</div>
{% endblock %}
What should I do to make my div 'fav_list' not overlapping my div '.nav_masthead'?
I have a bootstrap 4 card with a button at the end that is a form button with a POST method and url attached to it. How can I align this button to the bottom of the card? Here is my current code, which, if used with a non-form button, would work just fine. You can see that I have d-flex and flex-column in the card-body as well as mt-auto on the button as suggested by Bootstrap - align button to the bottom of card
div class="container">
<div class="card-deck mb-3 mt-4 text-center">
{% for object in object_list %}
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Stuff</h4>
</div>
<div class="card-body d-flex flex-column">
{% if Stuff == 'Stuff' %}
<h3 class="card-title pricing-card-title">Stuff</h3>
{% else %}
<h3 class="card-title pricing-card-title">Stuff</h3>
{% endif %}
{% if Stuff != 'Stuff' %}
<small>Stuff</small>
<small>{{ Stuff }} Stuff</small>
{% endif %}
{% if Stuff != 'Stuff' %}
<ul class="list-unstyled mt-3 mb-4">
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
<li><strong>Stuff</strong></li>
<li>Stuff</li>
{% if Stuff == 'Stuff' %}
<li>Stuff</li>
{% endif %}
</ul>
{% else %}
<ul class="list-unstyled mt-3 mb-4">
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
{% endif %}
<form method="POST" action="{% url 'Stuff' %}">
{% csrf_token %}
<div class="form-group">
<div class="row d-flex justify-content-center">
<div class="col-5">
<button type="submit" class="btn btn-info btn-md btn-block login-button mt-auto">Stuff</button>
</div>
</div>
</div>
<!-- <button class="btn btn-warning">Stuff</button> -->
<input type="hidden" name="Stuff" value="{{ Stuff }}">
</form>
</div>
</div>
{% endfor %}
</div>
</div>
I hope that I am understanding you the right way, but what if you add this to the CSS:
.card-body{
padding-bottom: 0px;
}
The button will be closer to the bottom of the card.
Solved it by using class="mt-auto" on the form section. This question: bootstrap card buttons and input text aligned bottom
says that anything under the mt-auto gets bottom-aligned.
I am trying to refactor my site using the D.R.Y. method, part of that is using liquid syntax to help.
Currently everything works with what I have here:
page-internal.html
---
layout: default
<div>
<div class="d-flex" style="background-color: #e9ecef;">
<div class="jumbotron mx-auto mb-0 py-3 px-5" style="max-width: 1200px">
<div class="col-lg-12 p-3 mx-auto">
<img width="50" height="50"
class="rounded-circle float-left mr-2"
src="/assets/img/internal/{{ page.image }}" />
<h1 class="display-4">{{ page.title | escape }}</h1>
<p class="lead">{{ content }}</p>
</div>
</div>
</div>
<div>
<div class="d-flex justify-content-center">
{% include card-post-{{ page.passname }}.html %}
</div>
</div>
</div>
The {{ page.passname }} pulls from a .md file like so:
---
layout: page-internal
title: User Interface
permalink: /pages/design-ui
image: ui.svg
passname: ui
---
That works just fine, too. But then I have to create several pages to pull from instead of just referencing passname to grab the right .md page (I hope I'm making sense here, apologies if I'm not). That page looks like this
card-post.ui.html
And the html on that page is:
<div class="container-fluid">
<div class="col-lg-12 mx-auto row d-flex justify-content-center mt-3" style="max-width: 1400px">
{% for post in site.categories.ui %}
<div class="card col-sm-12 col-lg-3 m-2">
<div class="card-body d-flex flex-column">
<div class="media">
<div class="d-flex mr-3">
<a href="{{ post.url }}">
<img width="40" height="40"
class="rounded-circle"
src="/assets/img/{{ post.image }} " alt="{{ post.title }}" />
</a>
</div>
<div class="media-body">
<h6 class="mb-1">{{ post.title }}</h6>
</div>
</div>
<div class="d-flex flex-column" style="height: 105px;">
<div class="p-2">
<p class="text-muted">{{ post.excerpt }}</p>
</div>
</div>
<div class=" flex-column align-items-end">
<button type="button" class="btn btn-secondary btn-sm btn-block" onclick="location.href = '{{ post.url }}';">View project</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
What I'd like to do is take the two html sites and have it like this:
---
layout: default
---
<div>
<div class="d-flex" style="background-color: #e9ecef;">
<div class="jumbotron mx-auto mb-0 py-3 px-5" style="max-width: 1200px">
<div class="col-lg-12 p-3 mx-auto">
<img width="50" height="50"
class="rounded-circle float-left mr-2"
src="/assets/img/internal/{{ page.image }}" />
<h1 class="display-4">{{ page.title | escape }}</h1>
<p class="lead">{{ content }}</p>
</div>
</div>
</div>
<div>
<div class="d-flex justify-content-center">
{% include card-post-{{ page.passname }}.html %}
<div class="container-fluid">
<div class="col-lg-12 mx-auto row d-flex justify-content-center mt-3" style="max-width: 1400px">
{% for post in site.categories.ui %}
<div class="card col-sm-12 col-lg-3 m-2">
<div class="card-body d-flex flex-column">
<div class="media">
<div class="d-flex mr-3">
<a href="{{ post.url }}">
<img width="40" height="40"
class="rounded-circle"
src="/assets/img/{{ post.image }} " alt="{{ post.title }}" />
</a>
</div>
<div class="media-body">
<h6 class="mb-1">{{ post.title }}</h6>
</div>
</div>
<div class="d-flex flex-column" style="height: 105px;">
<div class="p-2">
<p class="text-muted">{{ post.excerpt }}</p>
</div>
</div>
<div class=" flex-column align-items-end">
<button type="button" class="btn btn-secondary btn-sm btn-block" onclick="location.href = '{{ post.url }}';">View project</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
This would work however the syntax here:
{% for post in site.categories.ui %}
Needs to be (and this is where I can't figure out what to do)
{% for post in site.categories. {{ page.passname }} %}
This throws an error:
Liquid Warning: Liquid syntax error (line 23): Unexpected character { in "post in site.categories.{{ page.passname }}" in /_layouts/page-internal.html
So my question is, how can I get the passname from said .md post (in this instance it'd be design-ui.md ) and put it into {% for post in site.categories.ui %} where the word ui would be dependint on the .md
I hope I said all this right, apologies if not.
Your loop syntax {% for post in site.categories. {{ page.passname }} %}
is incorrect :
You may reach your category with bracket notation :
{% for post in site.categories[page.passname] %}