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>
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 %}
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 need to make an index view for my posts, and I choose a photo gallery for that.In my controller I have paginate set at 10.Unfortunately, my column is divided by one, horizontally : https://imgur.com/a/8sUm5eb .
I want to make this to be divided by 2 columns, 5 items/column.Can you give me a little help with that?Thank you.
My view
<!-- Promo Block -->
<div class="container g-pt-100 g-pb-70">
<!-- News Section -->
<div class="u-heading-v3-1 g-mb-30">
<h2 class="h5 u-heading-v3__title g-color-gray-dark-v1 text-uppercase g-brd-primary">Latest News</h2>
</div>
#foreach($posts as $post)
<div class="masonry-grid-item col-sm-6 g-mb-30">
<!-- Blog Background Overlay Blocks -->
<article class="u-block-hover">
<div class="g-bg-cover g-bg-white-gradient-opacity-v1--after">
<img class="d-flex align-items-end u-block-hover__main--mover-down" src="/storage/{{ $post->image }}" alt="Image Description">
</div>
<div class="u-block-hover__additional--partially-slide-up text-center g-z-index-1 mt-auto">
<div class="u-block-hover__visible g-pa-25">
#foreach($post->tags as $tag)
<span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $tag->name }}</span>
<span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">·</span>
#endforeach
<h2 class="h4 g-color-white g-font-weight-600 mb-3">
<a class="u-link-v5 g-color-white g-color-primary--hover g-cursor-pointer" href="/post/{{ $post->id }}">{{ $post->caption }}</a>
</h2>
<h4 class="d-inline-block g-color-white-opacity-0_7 g-font-size-11 mb-0">
By,
<a class="g-color-white-opacity-0_7 text-uppercase" href="/post/{{ $post->id }}">{{ $post->user->username }}</a>
</h4>
<span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">·</span>
<span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $post->created_at->diffForHumans() }}</span>
<span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">·</span>
<span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $post->comments()->count() }} comments</span>
</div>
<a class="d-inline-block g-brd-bottom g-brd-white g-color-white g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover g-mb-30" href="/post/{{ $post->id }}">Read more</a>
</div>
</article>
<!-- End Blog Background Overlay Blocks -->
</div>
#endforeach
</div>
</div>
<!-- End News Section -->
Make your first foreach like this
<div class="row">
Your foreach
</div>
There is a menu on the left with the effect of the accordion, on the right content is formed with a jinja. I need to do so that the height of the menu and the contents do not depend on each other.
as here: click
HTML:
<!-- menu -->
<div class="col-md-3">
<div class="wrapper">
<h1 class="header-tabs">Brands</h1>
<div class="tab">
{% for brand in brands %}
<button value="{{ brand.id }}">{{ brand.brand_name }
</button>
{% endfor %}
</div>
</div>
</div>
<!-- content -->
{% for sm in smartphones %}
<div class="col-md-2">
<img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">
</div>
<div class="col-md-5">
<h3 class="header-phone">{{ sm.brand }} {{ sm.model }}</h3>
<p descr-phone>{{ sm.description }}</p>
</div>
<div class="col-md-2">
<h4 class="price">{{ sm.price }}$</h4>
<input type="button" class="button-buy" value="Buy">
</div>
{% endfor %}
The usual way to achieve that is by nesting. Nesting must always be done using row-column pairs i.e. never nest a column directly inside another column.
So, in your case, you'd first create a column with the class col-md-9 then put a .row inside that column and then put all your content columns inside that newly created row.
Note that inside this newly created row you now have a total of 12 column units to work with.
Click "run code snippet" below and expand to full page for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- menu -->
<div class="col-md-3">
<div class="wrapper">
<h1 class="header-tabs">Brands:</h1>
<div class="tab">
<!-- {% for brand in brands %}-->
<button value="{{ brand.id }}">
<!-- {{ brand.brand_name }-->
Brand Name
</button>
<!-- {% endfor %}-->
</div>
</div>
</div>
<!-- content -->
<div class="col-md-9">
<div class="row">
<!-- {% for sm in smartphones %}-->
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<!-- {% endfor %}-->
</div>
</div>
</div>
</div>
Also note the use of the spacing class mb-3 (margin-bottom 3 units).
The img-fluid class makes the images responsive.
Reference:
https://getbootstrap.com/docs/4.0/layout/grid/#nesting