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.
Related
I'm developing an e-commerce with Django. My backend is fine, my problem is with the template. Currently, I want to display 4 products per row, and if there are 7 products, the other 3 must be aligned with the top one. I'm using bootstrap to do this, however, for some reason I don't know, it doesn't have 4 products on the same line, even with space. I'm using a container with 1200px.
home.html
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
{% for product in products %}
<div class="card mb-4 border rounded" style="width: 13.5rem;">
<a href="{{ product.get_absolute_url }}">
{%if product.image %}
<img class="img-produto" src='/media/{{product.image}}' class="card-img-top hover_img ">
{% else%}
<img class="img-produto" src="{% static '/img/not-found-product.jpg' %}" class="card-img-top hover_img">
{%endif%}
</a>
<div class="card-body">
<p class="card-title">{{product.name}}</p>
<p class="card-text"><i class='fas fa-dollar-sign' style="margin-right:2px"></i>{{product.price}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
Just remove width: 13.5rem; and add class col-4 in the div. Like,
<div class="col-4 card mb-4 border rounded">
<!-- your content goes here -->
</div>
I am working on a Django blog application and I have run into a problem with image alignment using Bootstrap 5. I am new at CSS and none of the solutions I see in SO are helping. My problem is I want the text under my images to always line up regardless of the height of the image itself. Here is a partial screen shot:
Here is the HTML code I developed:
{% extends 'base.html' %}
{% load static %}
{% block title %}Post List{% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<!-- Latest Posts -->
<main class="posts-listing col-lg-8">
{% if page_obj %}
<div class="container">
<div class="row">
<!-- posts -->
{% for post in page_obj %}
<div class="post col-xl-6">
<div class="card">
<a href="{{post.get_absolute_url}}">
<img src="{{post.thumbnail.url}}" alt="..." class="img-fluid"></a>
</div>
<div class="card-body">
<div class="post-meta d-flex justify-content-between">
{% comment "" %}<div class="date meta-last"></div>{% endcomment %}
<div class="category">
{% for cat in post.categories.all %}
{{cat.title}}
{% endfor %}
</div>
</div>
<a href={{post.get_absolute_url}}>
<h3 class="h4">{{post.title}}</h3>
</a>
<p class="text-muted">{{post.content|safe | truncatechars:256 }}</p>
<footer class="post-footer d-flex align-items-center">
<a href="{% url 'show-user-profile' post.author.user.id %}" class="profile d-flex align-items-center flex-wrap">
<div class="avatar"><img src="{{post.author.profile_picture.url}}" alt="..." class="img-fluid"></div>
<div class="title"><span>{{post.author.user.username}}</span></div>
</a>
<div class="date"><i class="icon-clock"></i>{{post.timestamp | timesince}} ago</div>
<div class="comments meta-last"><i class="icon-comment"></i>{{post.comment_count}}</div>
</footer>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<p class="text-big">No Posts in this category</p>
{% endif %}
</main>
{% include 'sidebar.html' with most_recent=most_recent category_count=category_count %}
</div>
</div>
{% endblock content %}
The comments I am getting make it seem like what I am trying to do is impossible, and perhaps it is. Here is a screenshot from Adobe Lightroom that shows the concept - all the photos are placed in identically sized boxes regardless of aspect ratio. No distortion, just different size margins to fill in unused space. Now Lightroom isn't HTML but can't this be done? As I mentioned, all of the sample galleries I see use photos with the same aspect ratio, but that should not be a requirement of a gallery.
I would appreciate some help. Thanks
In one of the HTML files of my Django project, I have a div that contains a col-6 for an image and a col-6 for a text.
{% if automotives %}
{% for automotive in automotives %}
<div class="row">
<div class="col-6 mb-4 mb-md-0 my-5 pl-5">
<h3 class="font-weight-bold">{{ automotive.title }}</h3>
<p class="text-muted">{{ automotive.description|safe }}</p>
</div>
<div class="col-6 mb-4 mb-md-0 my-5 pr-5">
<div class=" overlay z-depth-1-half">
<img src="{{ automotive.cover.url }}" class="img-fluid" alt="cover">
</div>
</div>
</div>
{% endfor %}
{% endif %}
I read title and description and cover from the database.
I want to periodically change the order of image and text in each row.
I have no idea how to do it. and I don't know much about js or jquery.
any help is appreciated.
You can achieve this with flex, but I see that your question is django/jinja2 related so, this is how I would approach this problem:
Build a partial template like this
{% if image_right %}
<div class="row">
<div class="col-6 mb-4 mb-md-0 my-5 pl-5">
<h3 class="font-weight-bold">{{ automotive.title }}</h3>
<p class="text-muted">{{ automotive.description|safe }}</p>
</div>
<div class="col-6 mb-4 mb-md-0 my-5 pr-5">
<div class=" overlay z-depth-1-half">
<img src="{{ automotive.cover.url }}" class="img-fluid" alt="cover">
</div>
</div>
</div>
{% else %}
<div class="row">
<div class="col-6 mb-4 mb-md-0 my-5 pr-5">
<div class=" overlay z-depth-1-half">
<img src="{{ automotive.cover.url }}" class="img-fluid" alt="cover">
</div>
</div>
<div class="col-6 mb-4 mb-md-0 my-5 pl-5">
<h3 class="font-weight-bold">{{ automotive.title }}</h3>
<p class="text-muted">{{ automotive.description|safe }}</p>
</div>
</div>
{% endif %}
You can name this something like image_text.html.
This template contains a bit of duplicate code, but it is simple to understand.
If image_right variable is True (or set to any non null value), it will show the row with the image on the right.
If image_right variable is False, (or 0 or any other null value), it will show the image left (so, image on the left is the the default behavior in this case).
Then, in your main template, you can use this partial template you just built (image_text.html) like this, for example, if you want to switch image on left and right on each row:
{% if automotives %}
{% for automotive in automotives %}
{% include 'image_text.html' with automotive=automotive image_right=forloop.counter|divisibleby:2 %}
{% endfor %}
{% endif %}
forloop.counter is the index of your for loop (it starts from 1, user forloop.counter0 if you want a counter that starts from 0).
When forloop.counter is even, image_right in your partial template will be True, so it will show image on the right.
When forloop.counter is odd, image_right in your partial template will be False, so it will show image on the left.
Hope it helps. This may need some tweaks though.
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>
I cannot see why my background image is not showing. I've tried even eliminating the css styling just to try and get the image to pop up somewhere. The image is recognized and found just fine, but all I get is a white background.
{% extends "base.html" %}
{% block page_content %}
<div class="view" style="background-image: url('17973908.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;">
<div class="container-fluid">
<br>
<div class="row">
<div class="col-sm-10">
<h1>Blog</h1>
</div>
<div class="col-sm-1">
<a class="btn-floating btn-lg btn-fb" href="#" type="button" role="button"><i class="shadow rounded-circle fab fa-facebook fa-2x" style="color:#0099FF;"></i></a>
</div>
<div class="col-sm-1">
<a class="btn-floating btn-lg btn-fb" href="#" type="button" role="button"><i class="shadow rounded fab fa-linkedin fa-2x" style="color:#0099FF;"></i></a>
</div>
</div>
<hr>
</div>
<div class="container">
{% for post in posts %}
<div class="shadow card" style="margin-bottom: 10px;">
<div class="card-header">
<h2>{{ post.title }}</h2>
</div>
<div class="card-body">
<div class="card-title">
<small>
{{ post.created_on.date }} |
Categories:
{% for category in post.categories.all %}
<a href="{% url 'blog_category' category.name %}">
{{ category.name }}
</a>
{% endfor %}
</small>
</div>
<div class="card-text">
<p>{{ post.body | slice:":400" }}...</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
Based on your question I cannot reproduce your setup, so here are just some suggestions for trying to find the problem.
Make sure the image is loaded properly - open DevTools with F12 and check Console and Network tabs for errors
Remove your custom CSS, i.e., at least the view class
Make sure the div on which the image is set has a width and height larger than 0
Make sure no element is on top of the image div - try setting a high z-index, e.g., z-index: 9999;
Remove surrounding HTML elements, especially elements inside the image div
P.S.: I directly copied your code into the Bootstrap Starter template and changed the background-image url to some random image from the internet and it worked.