How can I align cards in a group? If I install height-full in card-header the whole layout breaks down
<div class="pb-5 row justify-content-center">
{% for movie in movie_list %}
<div class="col-md-4 top-bottom">
<div class="card mb-4 box-shadow">
<div class="card-header text-center align-items-center d-flex justify-content-center">
<h4 class="my-0 font-weight-normal">{{ movie.title }}</h4>
</div>
<div class="card-body">
<img class="mx-auto d-block center" src={{ movie.image }} width="150">
<ul class="list-unstyled mt-3 mb-4">
<li>Рейтинг: {{ movie.vote_average }}</li>
<li>Дата выхода: {{ movie.release_date }}</li>
</ul>
<button type="button" class="btn btn-lg btn-block"
onclick="location.href='/movie/{{ movie.id }}'">Выбрать фильм
</button>
</div>
</div>
</div>
{% endfor %}
</div>
How I want to get
Add the class .h-100 to .card will do the trick.
Codepen
Because you didn't set card height. If you want they seen same height you must set card height
Temporary solution
.card-header{
min-height: 15vh!important;
height: 100%!important;
}
Related
enter image description hereI'm working on Ecommerce Website that sells Coffee and my problem is that the only working plus and minus button is the first coffee. The plus and minus buttons on the others are not functioning. Is it about the for statement where I'm wrong? or the structure of the html isn't right.
I've copied some of the code on cart.html file to make the product page had the option of adding products to the cart and also has a proceed button to the checkout page. The before structure of the site was you click on the image of a product and directed to the addtocart page then to the checkout page.`{% extends 'app/base.html' %}
{% load static %}
{% block title %}Category{% endblock title %}
{% block main-content %}
<div class="container my-5">
<div class="row">
<div class="col-sm-8">
<div class="card">
<div class="card-body">
{% for prod in product %}
<div class="row">
<div class="col-sm-3 text-center align-self-center"><img src="{{prod.product_image.url}}" alt="" srcset="" class="img-fluid img-thumbnail shadow-sm" height="150" width="150"></div>
<div class="col-sm-9">
<div>
<h5>{{prod.title}}</h5>
<p class="mb-2 text-muted small">{{prod.description}}</p>
<div class="my-3">
<label for="quantity">Quantity:</label>
<a class="minus-cart btn" pid={{product.id}}><i class="fas fa-minus-square fa-lg"></i></a>
<span id="quantity">{{quantity}}</span>
<a class="plus-cart btn" pid={{product.id}}><i class="fas fa-plus-square fa-lg"></i></a>
</div>
<div class="d-flex justify-content-between">
<a href="#" class="remove-cart btn btn-sm btn-secondary mr-3" pid={{prod.id}}>Remove item </a>
<p class="mb-0"><span><strong>₱ {{prod.discounted_price}}</strong></span></p>
</div>
</div>
</div>
</div>
<hr class="text-muted">
{% endfor %}
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h3>The Total Amount </h3>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0" >Amount<span id="amount">₱ {{amount}}</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">Shipping<span>₱ 144</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>Total</strong>
</div>
<span id="totalamount"><strong>₱ {{totalamount}}</strong></span>
</li>
</ul>
<div class="d-grid">Place Order</div>
</div>
</div>
</div>
</div>
</div>
{% endblock main-content%}
`
I'm working on a comments section for a blog in Flask. Having a very poor understanding of html, I decided to go with a public domain template. The script below works great, just one problem! After each submission, the comment window shrinks. Does anyone know how to make the size of the comment window constant?
{% for comment in post.comments %}
<div class="container my-2 py-2">
<div class="row d-flex justify-content-center">
<div class="col-md-12 col-lg-10">
<div class="card text-dark">
<div class="card-body p-4">
<p class="fw-light mb-4 pb-2"> Recent Comment By: </p>
<div class="d-flex flex-start">
<img class="rounded-circle shadow-2-strong me-2"
src="{{url_for('static', filename='uploads/' + comment.user.image_file)}}" alt="avatar" width="60"
height="60" />
<div>
<h6 class="fw-bold mb-2">{{comment.user.username}}</h6>
<div class="d-flex align-items-center mb-2">
<p class="mb-0">
<i> {{comment.datetime.strftime('%B %d, %Y')}} </i>
{% if user.id == comment.author or user.id == post.author %}
<a href="/delete_comment/{{comment.id}}">
<span class="badge bg-danger">remove?</span>
</a>
{% endif %}
</p>
</div>
<p class="mb-0"> {{comment.text|safe}} </p>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
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 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 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] %}