I am extending base.html in Django and want to change the <header> tag background-image. I {% extends 'blog/base.html' %} but the background-image does not appear on child template. I wonder what seems to be error? I am inheriting base template using {% block header %} tag to insert a new <header> tag into the child template. The base template header I want to change the header background-image is the following.
<header class="masthead" style="background-image: url('static/assets/img/home-bg.jpg');margin-bottom: 0;padding-top: 21%;padding-bottom: 10%;">
<div class="container position-relative px-4 px-lg-5" style="padding-top: 0;">
<div class="row gx-2 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<span class="subheading"> Novel life hacks, tricks, skills and methods in all walks of life.</span>
</div>
</div>
</div>
</div>
</header>
I got it to work through block template tag.
in base.html:
{% block header %}
<header class="masthead" style="background-image: url('static/assets/img/home-bg.jpg');margin-bottom: 0;padding-top: 21%;padding-bottom: 10%;">
<div class="container position-relative px-4 px-lg-5" style="padding-top: 0;">
<div class="row gx-2 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<span class="subheading"> Novel life hacks, tricks, skills and methods in all walks of life.</span>
</div>
</div>
</div>
</div>
</header>
{% endblock %}
and in postdetail.html:
{% block header %}
<header class="masthead" style="background-image: url({% static 'assets/img/home-bg.jpg' %}); ; background-position: center; margin-bottom: 0;padding-top: 21%;padding-bottom: 10%;">
<div class="container position-relative px-4 px-lg-5" style="padding-top: 0;">
<div class="row gx-2 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<span class="subheading"> Novel life hacks, tricks, skills and methods in all walks of life.</span>
</div>
</div>
</div>
</div>
</header>
{% endblock %}
Related
I'm trying to create a series of Bootstrap 5 cards based on variable data using a Jinja for loop. When they plot on the site, they are not uniform height as I'd hoped. Is there a way to fix this code so that each card on each row appears as the same height? It looks correct on the widest page setting, but shrinking causes the alignment to stop working.
<div class="row row-cols-1 row-cols-md-2 g-4" id='active-disaster-dashboard'>
{% for emergency in active_emergencies %}
<a href='/emergency/{{emergency.Emergency.id}}'>
<div class="col d-flex align-items-stretch">
<div class='card bg-light portfolio-card'>
<div class="card-body d-flex flex-column">
<div class='row align-items-center'>
<div class='col-3 p-4'>
<img class="img-fluid" src="/static/assets/img/emergency_types/{{emergency.EmergencyType.emergency_type_name}}.png" />
</div>
<div class='col p-4'>
<h2 class="Montserrat text-danger">{{emergency.Emergency.emergency_name}}</h2>
</div>
</div>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
I've tried fiddling with the Bootstrap classes that would (ostensibly) set this to be the same size. I can't figure out why it isn't working.
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 been using Hugo to build up my website, however, I am having trouble making bootstrap cards of equal height even after using the h-100 class in the card div (as mentioned in a number of SO posts). I have copied my HTML code below.
I am guessing something in the css must be overriding the class.
Any advice would be appreciated.
<section id="blog-posts">
<div class="container-fluid ">
<div class="row text-center">
<div class="col-lg-12">
<h2 class="section-heading">Latest Blog Posts</h2>
<div class="section-underline"></div>
</div>
{{- range ( where site.RegularPages "Section" "blog" | first 3 ) }}
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 mb-5">
<div class="card h-100">
<div class="card-img img-fluid">
<!-- <div class="blog-cat-tag">Test</div> -->
{{ if isset .Params "featured_image" }}<img class="blog-image" src="{{ index .Params "featured_image"}}" alt="...">{{end}}
</div>
<div class="card-body">
<div class="project-title">{{ .Title }}</div>
<p class='card-text'>{{ .Summary }}</p>
Read More
<!-- <a class="viewmore" href="">Read More</a> -->
</div>
<div class="index-blog-post-details">
<div class="index-blog-post-icons">
<i class="far fa-calendar-alt"></i> {{- .Date.Format "January 2, 2006" -}}
<i class="far fa-clock"></i> {{ .ReadingTime }} min read
</div>
</div>
</div>
</div>
{{ end}}
</div>
</div>
</div>
I'm trying to implement card bootstrapping in my .html but I cannot get it to be centered. Please see the code below and help
<h1> 10 Games Recommended Based on {{ selected }} </h1>
<div class = "container">
<div class="recommendations">
{% for name in names_list %}
<div class="card-group">
<div class="card text-center" style="Max-width: 30%;">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<h5 class="card-title"> {{ name }}</h5>
<div class = 'card-body'>
<p1 class = "card-text">Overall Reviews: {{games[name]['rating'] }}</p1>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
I apologize for the mess but the way my app is giving results is pushed to the left like this.
My style is below
<style>
p {font-size: 30px;}
p1 {font-size: 13px;}
a {color:navy;
font-size: 20px;}
body {text-align: center;}
body {background-color: lightblue;}
</style>
Is there anyway I can center these or align them side by side when using loop?
You're missing .row and .col classes. Add them to make it.
<h1>10 Games Recommended Based on {{ selected }}</h1>
<div class="container">
<div class="row">
<div class="recommendations">
{% for name in names_list %}
<div class="col-3">
<div class="card-group">
<div class="card text-center" style="max-width: 30%">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<h5 class="card-title">
{{ name }}
</h5>
<div class="card-body">
<p1 class="card-text"
>Overall Reviews: {{games[name]['rating'] }}</p1
>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
Just note that .col-3 is supposed to be repeated and .row should be parent.
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'?