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.
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 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 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
So my problem is that I have those 2 buttons inside this card and when i click them it redirects to a link which the card itself is redirecting, so can i make this work?
<a class="panel-product-div-a" href="{{ item.get_absolute_url }}">
<div style="color: {{ item.checks_color }}" class="p-checks">
<p>{{ item.checks|safe|linebreaks }}</p>
</div>
<span>
<img {% if item.image %} src="{{ item.image.url }}" {% else %} nop {% endif %} alt="ehm..">
</span>
<h1 class="mdh2">{{ item.title }}</h1>
<div class="panel-button-div">
<button onclick="window.location.href='{{ item.get_add_to_cart_url }}'"
class="btn btn-lg btn-primary panel-btn">To cart</button>
<button onclick="window.location.href='{{ item.get_absolute_url }}'"
class="btn btn-lg btn-light panel-btn">More info</button>
</div>
<div class="con-div">
{% if item.discount_price %}
<h1 class="mdh1-discount">
{{ item.price }}€
</h1>
<h1 class="mdh1">
{{ item.discount_price }}€
</h1>
{% else %}
<h1 class="mdh1">
{{ item.price }}€
</h1>
{% endif %}
</div>
</a>
You can make use of event.preventDefault() :
<button onclick="event.preventDefault();window.location.href='{{ item.get_add_to_cart_url }}'"
class="btn btn-lg btn-primary panel-btn">To cart</button>
Here is a full working example :
<html>
<body>
<a href="card_link">
<p>My Card text</p>
<button onclick="event.preventDefault();window.location.href='button_link'">button</button>
</a>
</body>
</html>
You said
when i click them it redirects to a link which the card itself is redirecting
do you need the link to be there in the card itself? How about you try removing the link that the card redirects to and then the button links will become accessible.
Otherwise, if you have access to the css, using the z-index style helps to move certain elements to the front or to the back, so you could give the buttons a higher z-index which will bring them in front of the card.
I have to hide some button in an html page and for this I wanted to use a line that is located in another html file of mine, the ng-if="category.layers_count > 0".
enter image description here
But when I tried to put it in my other file, it doesn't work and I don't know why.
This is how I tried to do it.
{% verbatim %}
<div ng-repeat="category in categories"</div>
{% endverbatim %}
<div ng-if="category.layers_count > 0">
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
<a target="_self" href="{% url "search" %}?limit=100&offset=0&category__identifier__in=biota">
<div class="category" data-toggle="tooltip" data-placement="auto"
title="{% trans "Flora and/or fauna in natural environment. Examples: wildlife, vegetation, biological sciences, ecology, wilderness, sealife, wetlands, habitat." %}">
<i class="fa fa-leaf fa-3x"></i>
<h4>{% trans "Biota" %}</h4>
</div>
</a>
</div>
</div>