This is ultimately just one box. But since it has the 'for' loop, it should have 3 boxes horizontally aligned.
<div class="album py-5 bg-light">
<div class="container">
{% for hobby in hobbies.all %}
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="{{ hobby.image.url }}"/>
<div class="card-body">
<p class="card-text">{{ hobby.summary }}</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
I keep having this:
What will I do?
Here you go with a solution
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
{% for hobby in hobbies.all %}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="{{ hobby.image.url }}" />
<div class="card-body">
<p class="card-text">{{ hobby.summary }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
You class="row" should be outside the loop.
class="row" creates row in a table format that means each item within a loop will create a row and then a column inside i.e. you see your each cards in new row.
For getting the cards horizontally, all the cards should be place within a single row.
Related
I have a list:
productlinks = [google.com, tes.com, lol.com]
prices = [$134, $123,$123]
I wanna extract those list to my django template inside the bootsrap. Here is my django template code:
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
{% for link in productlinks %}
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<!-- Product price--> x
$40.00 - $80.00 -> price must be here using loop to extract the list
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="{{ link }}" target="_blank">View options</a></div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
So basically, I wanna also extract the prices list but i dont know how to place the loop after the my productlinks loop. Because it will ruins the result.
and here is my views code:
return render(request, '/home.html', {
'productlinks': productlinks,
'prices': productprices
}
)
views
return render(request, '/home.html', {
'data': zip(productlinks,productprices)
}
)
template
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
{% for link,price in data %}
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<!-- Product price--> x
{{ price }}
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="{{ link }}" target="_blank">View options</a></div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
I am making a django app. This is my index.html template:
{% extends "blog/base.html" %}
{% block content %}
{% if latest_post %}
<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">
{{ latest_post.title }}
</h1>
<p class="lead my-3">
{{ latest_post.body|truncatewords:30 }}
</p>
<p class="lead mb-0">
Continue reading...
</p>
</div>
</div>
{% endif %}
{% for post in posts %}
<div class="row mb-2">
<div class="col-md-6">
<div
class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
>
<div class="col p-4 d-flex flex-column position-static">
<h3 class="mb-0">{{ post.title }}</h3>
<div class="mb-1 text-muted">{{ post.date_posted }}</div>
<p class="mb-auto">
{{ post.body|truncatewords:30 }}
</p>
Continue reading
{% endfor %}
{% endblock %}
However, I am getting this error:
django.template.exceptions.TemplateSyntaxError: Unclosed tag on line 2: 'block'. Looking for one of: endblock. in django
I have made sure:
All the blocks are closed
There is no whitespaces between the percent signs and the block names
I am not missing any percent signs
Please help me
Inside for loop you have four opened <div> element after closing those it seems ok.
{% for post in posts %}
<div class="row mb-2">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<h3 class="mb-0">{{ post.title }}</h3>
<div class="mb-1 text-muted">{{ post.date_posted }}</div>
<p class="mb-auto">
{{ post.body|truncatewords:30 }}
</p>
Continue reading
</div></div></div></div>
{% endfor %}
I have a form setup that is able to edit products inside of my database. What I would like to do is have the input fields be populated with the information of the product that a user is trying to edit, instead of having to manually enter in ALL the information (basically being able to highlight the information) I am using Flask along with Jinja2 and WTForms.
Here is my code for the form:
{% extends 'navbar.html' %}
{% block container %}
<link rel="stylesheet" href="{{url_for('static', filename='css/product-edit.css') }}">
<div class="top-pad" style="text-align: center;">
<div class="well">
<div class="row" id="product-form">
<h2 class="col-md-6" style="color: blue">Edit Product</h2>
</div>
<form method="POST" action="{{ url_for('my_view.product_edit', key=category_id) }}" role="form" id="product-form">
<div class="row">
<div class="form-group col-md-6">{{ form.brand.label }}: {{ form.brand() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.name.label }}: {{ form.name() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.price.label }}: {{ form.price() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.rating.label }}: {{ form.rating() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<!-- Category Dropdown -->
<label for="category col-md-6" id="category-select">Categories: </label>
<select name="category" id="category">
{% for category in categories %}
<option value="{{ category[0] }}">{{ category[1] }}</option>
{% endfor %}
</select>
<!-- END Category Dropdown -->
</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.year.label }}: {{ form.year() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.stock.label }}: {{form.stock() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.image.label }}: {{ form.image() }}</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
I'm not even sure I am stating my question properly, please let me know if I need to clarify more. I will try my best.
I am using Django. In my template i am using for loop but i don't need to print the same date which is already printed. so my code is-
{% for applicant in applicants %}
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12 col-sm-12 col-md-2">
<div class="col-xs-12 application_slot_list">
<h5>{{ applicant.created_on|date }}</h5>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 candidate_list_application">
<div class="row">
<div class="col-xs-12 list-title">
<h4>{{ applicant.employee }}<small class="pull-right"><button class="btn btn-link">Download CV</button></small></h4>
</div>
So here i am trying to print two things, employee and date but i don't want to print repeated date. So is there any way to do this. I want to do this only in template not in views.
Use the {% ifchanged %} tag:
Check if a value has changed from the last iteration of a loop.
{% for applicant in applicants %}
<div class="row">
<div class="col-xs-12">
{% ifchanged %}
<div class="col-xs-12 col-sm-12 col-md-2">
<div class="col-xs-12 application_slot_list">
<h5>{{ applicant.created_on|date }}</h5>
</div>
</div>
{% endifchanged %}
<div class="col-xs-12 col-sm-12 col-md-10 candidate_list_application">
<div class="row">
<div class="col-xs-12 list-title">
<h4>{{ applicant.employee }}<small class="pull-right"><button class="btn btn-link">Download CV</button></small></h4>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
I'm trying to sort the panels onto that way:
image screen - please enter to see:
But I've got more than 6 columns (it's 9). I'm looking forward to set 4 on the LEFT, 4 on the RIGHT and 1 in CONTENT.
My code is:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w kórych jesteś zawodnikiem:</div>
<div class="panel-body">
<ul>
{% for playerT in playersT %}
<li>{{playerT.tournament_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4 ">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w których jesteś trenerem:</div>
<div class="panel-body">
<ul>
{% for tournament in ctournaments %}
<li>{{tournament.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje turnieje:</div>
<div class="panel-body">
<ul>
{% for tournament in mtournaments %}
<li>{{tournament.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje drużyny:</div>
<div class="panel-body">
<ul>
{% for team in teams %}
<li>{{team.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenie do drużyny:</div>
<div class="panel-body">
<ul>
{% if playerteam %}
<li>{{ playerteam.team_id.name }} <a href="{% url 'playerToTeamAccept' playerteam.id %}">
Akceptuj </a></li>
{% endif%}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia dla Twoich zawodników do turnieju:</div>
<div class="panel-body">
<ul>
{% for player in AplayersT %}
<li>{{ player.tournament_id.name }} <a href="{% url 'playerToTournamentAccept' player.id %}">
Akceptuj </a></li>
{% endfor%}
</ul>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByC' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zgłoszenia zawodników do Twoich turniejów:</div>
<div class="panel-body">
<table class="table table-hover table-condensed">
<br>
{% for EplayerT in EplayersT %}
<tr>
<td class="col-md-3" align="center"><a
href="{% url 'allTeamTourAcceptByM' EplayerT.player_id.team_id.id %}"> Akceptuj
drużynę {{ EplayerT.player_id.team_id.name }} </a></td>
<td class="col-md-3">Zawodnik {{ EplayerT.player_id.name }} {{ EplayerT.player_id.surname }}
zgłoszony do {{ EplayerT.tournament_id.name }}
</td>
<td class="col-md-3" align="center"> Akceptuj zawodnika</td>
</tr>
{% endfor %}
</table>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByM' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Przynależność do drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li>{{player.team_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Pozostałe drużyny
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia do Twojej drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li>{{player.team_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Pozostałe drużyny
</div>
</div>
</div>
</div>
But now it looks:
image screen - please enter to see:
Does anyone has an idea how to sort it ? Thanks for each solution!
Are you looking for a layout like this? In that case I would suggest you to create three columns and simply put four panels inside the left and right column. Also has the advantage that the top of panel 2 isn't dependent on the bottom of panel 6.
.box {
font-family: Arial;
font-size: 24px;
border: 1px solid #f99;
background-color: #fee;
color: #333;
padding: 10px;
height: 75px;
margin-bottom: 10px;
}
.box.box--100 {
height: 100px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="box">1</div>
<div class="box box--100">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="col-xs-4">
<div class="box">5</div>
</div>
<div class="col-xs-4">
<div class="box box--100">6</div>
<div class="box">7</div>
<div class="box box--100">8</div>
<div class="box box--100">9</div>
</div>
</div>
</div>