In this Image, the data appears in vertical format. But I want data in horizontal format.
{% block title %}Blog{% endblock title %}
{% block body %}
<div class="container">
<div class="row">
{% for post in posts%}
<div class="col-lg-3">
<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->
<img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<div class="post block">
<h2 class="subtitle">{{post.title}}</h2>
<small>Posted At {{post.date_added}}</small>
<p>{{post.intro}}</p>
Read More
</div>
{% endfor %}
{% endblock body %}
Hi There I'm Newbie In Django
How Can I Able To Appear Horizontally The Data Is Come From Database
So The Problem Was I Was Ending Row Inside For Loop To Create New Row You Have To Put For Loop Outside
Check This Code
{% extends 'base.html' %}
{% block title %}Blog{% endblock title %}
{% block body %}
<div class="container">
<div class="row">
{% for post in posts%}
<div class="col-lg-4">
<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->
<img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
<div class="card-body">
<h5 class="card-title">{{post.title}}</h5>
{{post.date_added}}
<p class="card-text">{{post.intro}}</p>
Go somewhere
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock body %}
Related
I am new to Bootstrap and Django. I am trying to style a card, but card header (background) does not fill entire width of the card. Here is an example:
Here is the code:
<div class="container">
<div class="grid">
<div class="row">
{% for list, content in content.items %}
<div class="card col-md-6 shadow-lg">
<a href="{{user_name}}/{{list}}">
<div class="card-header bg-secondary text-white">{{list}}</div>
<div class="card-body">
<ul>
{% for row in content %}
<li>{{row}}</li>
{% endfor %}
</ul>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
You need to get rid of horizontal padding for the card.
Add the px-0 class to the card div or p-0.
Regards.
Cristián is right. Here is an code example that may help:
<div class="card px-0">
<h4 class="card-header">
Card Header
</h4> <!-- card-header -->
<div class="card-body">
Card Body
</div> <!-- card-body -->
</div> <!-- card -->
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
Something wrong with my .html template. Can't figure the error on line 29. Says Invalid block tag on line 29: 'endfor', expected 'elif', 'else' or 'endif'. Did you forget to register or load this tag?
{%extends 'mtunes/basic.html'%}
{% block title%}Search{% endblock %}
{% block body %}
{% load static %}
{% if query %}
<h1 style="color: rgb(158, 60, 60); text-align: center;">Search Results for {{ query_str }}</h1>
{% for i in query %}
<div class="container">
<div class="card mb-3" style="max-width: 940px; padding-top: 0%;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="/media/{{i.image}}" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title" style="color: green; font-weight: 550;">{{i.name}}</h5>
<p class="card-text">Singer Name: {{i.singer}}</p>
<p class="card-text">Tags: {{i.tags}}</p>
<p class="card-text">Movie: {{i.movie}}</p>
{% if user.is_authenticated %}
<button class="btn btn-outline-danger">Listen Song</button>
</div>
</div>
</div>
</div>
{% endfor %}
{% elif notfound %}
<div class="row pt-3">
<!-- you can do a lot more here -->
<h1> This song is not Available</h1>
<span style='font-size:100px;'>😂</span>
</div>
</div>
</div>
{% endif %}
{% endblock %}
You haven't ended your {% if user.is_authenticated %} tag with an {% endif %}
you didn't pass the tag in a right way and there is no such tag name {% elif notfound %} use {% else %} there and close your userauthenciation tag with with {% endif %}
{% load static %}
{% if query %}
<h1 style="color: rgb(158, 60, 60); text-align: center;">Search Results for {{ query_str }}</h1>
{% for i in query %}
<div class="container">
<div class="card mb-3" style="max-width: 940px; padding-top: 0%;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="/media/{{i.image}}" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title" style="color: green; font-weight: 550;">{{i.name}}</h5>
<p class="card-text">Singer Name: {{i.singer}}</p>
<p class="card-text">Tags: {{i.tags}}</p>
<p class="card-text">Movie: {{i.movie}}</p>
{% if user.is_authenticated %}
<button class="btn btn-outline-danger">Listen Song</button>
{% endif %} **you have to close user authentication tag**
</div>
</div>
</div>
</div>
{% endfor %}
{% else %} **use else here**
<div class="row pt-3">
<!-- you can do a lot more here -->
<h1> This song is not Available</h1>
<span style='font-size:100px;'>😂</span>
</div>
</div>
</div>
{% endif %}
{% endblock %}
Good evening everyone,
I am trying to avoid that the image of a card (implemented through bootstrap) shifts to the top of the card once the user sees the website from a mobile version.
The problem is as follow:
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
{% if post.immagine %}
<div class="col-md-4">
<img src="{{ post.immagine.url }}" class="card-img" width="200" height="260">
</div>
{% else %}
<div class="col-md-4">
</div>
{% endif %}
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">{{ post.nome }} {{ post.cognome }} -
</h5>
Leggi
<p class="card-text"></p>
</div>
{% else %}
<div class="card-body" style="text-align:center">
<h5 class="card-title">{{ post.nome }} {{ post.cognome }}</h5>
</div>
</div>
</div>
{% endfor %}
bootstrap consists of 12 cols to render the content
if you write:
<div class="col-md-4"></div>
<div class="col-md-8"></div>
it means that the left column gets 1/3 of the content and the rigth one 2/3.
the md in col-md-* means that this only works for all resolutions bigger than md ( it's tablet i think )
just get rid of the md and it should work
<div class="col-4"></div>
<div class="col-8"></div>
I have contents which were published using tinymce editor. Now, I want to show my content, that's why I have to use safe filter. But, whenever I'm trying to use slice or truncate filter, the template breaks.
this is my HTML code.
{% extends 'blog/frontend/layouts/base.html' %}
{% block content %}
<div class="card border-primary">
{% for post in posts %}
<div class="card my-2 mx-1">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<hr>
<img src="{{ post.image.url }}" alt="Card image" width="85%" class="mx-auto d-block">
<p class="card-text mt-1">
{{ post.content|truncatewords:50|safe}}
</p>
<hr>
<div class="d-flex">
<div class="px-2 py-0 my-auto">
<h6><i class="fas fa-user-edit"></i> {{ post.author.username }}</h6>
</div>
<div class="px-2 py-0 my-auto">
<h6>Date posted: <span class="text-info">{{ post.date_posted|date:"d M, Y" }}</span></h6>
</div>
<div class="ml-auto px-2 my-auto ">
Read more
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
These are the image, first one without sliceor turncate filter, 2nd and 3rd one are with them.
Sorry, it was a stupid question to ask. Just in case anyone else is facing this kind of problem, use truncatechars_html or truncatewords_html just like this: {{ post.content|truncatewords_html:30|safe }} or {{ post.content|truncatechars_html:30|safe }}
I have a large database of articles, I want to display them all in bootstrap rows(3 articles per row):
<div class="container">
<h1 class="mt-4 mb-4 text-center display-4">All News </h1>
<div class="row">
{% for article in articles %}
<div class="col-md">
<div class="card">
<h2 class="pt-2">{{ article.title }}</h2>
<p class="lead"> {{ article.description }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
The problem is that row is created outside the for statement, so every article is squeezed into one row (when there should be 3 articles per row). Is there a way to loop through the for statement, and put 3 articles in one row, close that row and then begin a new one?
You could try to use the value of forloop.counter to change the behavior every three iterations.
<div class="container">
<h1 class="mt-4 mb-4 text-center display-4">All News </h1>
<div class="row">
{% for article in articles %}
{% if forloop.counter|divisibleby:3 %}
<div class="row">
{% endif %}
<div class="col-md">
<div class="card">
<h2 class="pt-2">{{ article.title }}</h2>
<p class="lead"> {{ article.description }}</p>
</div>
</div>
{% if forloop.counter|divisibleby:3 %}
</div>
{% endif %}
{% endfor %}
</div>
</div>