How do output the following? I want to output the "grid" class after exactly 4 "block" classes. The inner divs are objects returned from a view.
<div class="grid">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="grid">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
...
I've tried using forloop.counter0|divisibleby:4 with no success.
I think you're on the right track with the counter method. However, it looks like you just have a couple syntax errors that are tripping you up. You probably want forloop.counter|divisibleby:"4", so something like
<div class="grid">
{% for item in items %}
<div class="block">...</div>
{% if forloop.counter|divisibleby:"4" %}
</div>
<div class="grid">
{% endif %}
{% endfor %}
</div>
should do the trick.
Try forloop.counter|divisibleby:4. The addition of the zero means the loop is zero indexed. By the time you get to the 4th loop the counter will only read 3 which isn't evenly dividable by 4.
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 -->
I'm sure this is a simple answer but for the life of me I cant figure / find out how to go about this.
I want to display blog posts from my data base in three equal columns.
When I start looking into the bootstrap docs this is the code given.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
However If I go to implement it I dont understand how i would be able to put the for loop on it without it repeating everything 3 times. IE:
{% for post in posts.all %}
<div class="row">
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
</div>
{% endfor %}
If you could please point me in the right direction on how to go about this it would be very much appreciated bootstrap is not a requirement.
The view should "prepare" the data to make it easy to enumerate over this. We can create chunks with:
def some_view(request):
posts = list(Post.objects.all())
posts = [posts[i:i+3] for i in range(0, len(posts), 3)]
return render(request, 'some-template.html', {'products': products})
in the template we can then work with a double {% for … %}…{% endfor %} loop [Django-doc]:
{% for chunk in posts %}
<div class="row">
{% for post in chunk %}
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
{% endfor %}
</div>
{% endfor %}
I am building a site using Flask and Bootstrap and I have long lists of objects that I want to display on the page. I have a 6 column layout and I want the list spill over one column to the next. I know I can do this on the python side but I am wondering if there is a way that bootstrap or CSS can handle it?
UPDATE: better explanation --> I want a long list of names to be divided up in to six equal(ish) columns. I can divide the list on the backend but was hoping there is a way to do this on the front end.
UPDATE UPDATE: Duh! here is what I was looking for ...
'''Jinja
<div class="container">
<div class="row">
<div class="col-2">
<!--I want this part to flow over all 6 columns-->
{% for name in names %}
{{name.firstname}} {{name.lastname}} <br>
{% endfor %}
</div>
</div>
</div>
''''
Because the columns automatically wrap after 12 columns I don't need to code each column. That's what I was missing. Thank you everyone!
To make 6 even columns, you can create a single container, a single row then an element for each item in your list with the class "col-2" (these could be divs, links, list items, etc). Bootstrap will automatically make each element 1/6 of the screen wide. And even though you only have one "row" div, Bootstrap will make all of your elements flow into as many rows as needed.
The code below will give you 2 rows of 6 columns.
<div class="container-fluid">
<div class="row">
<div class="col-2">Element 1</div>
<div class="col-2">Element 2</div>
<div class="col-2">Element 3</div>
<div class="col-2">Element 4</div>
<div class="col-2">Element 5</div>
<div class="col-2">Element 6</div>
<div class="col-2">Element 7</div>
<div class="col-2">Element 8</div>
<div class="col-2">Element 9</div>
<div class="col-2">Element 10</div>
<div class="col-2">Element 11</div>
<div class="col-2">Element 12</div>
</div>
</div>
I think you can achieve what you want with simple bootstrap grid system.
<div class="row">
<div class="col-2"></div>
<div class="col-2"></div>
...
...
<div class="col-2"></div>
</div>
here is what I was looking for
'''Jinja
<div class="container">
<div class="row">
<div class="col-2">
<!--I want this part to flow over all 6 columns-->
{% for name in names %}
{{name.firstname}} {{name.lastname}} <br>
{% endfor %}
</div>
</div>
</div>
''''
I don't need to code each column separately! The for loop puts each item in a 2 column wide column that automatically wraps after 12 total columns. That's what I was missing. Thank you everyone!
Following code giving me the output of one post in one row, how can I change it to display two posts in one row ?
<div class="container">
<div class="row">
<div class="col-md-4 mt-3 left">
{% for post in disease_list %}
<div class="card mb-4">
<div class="card-body">
<h6 class="card-title"> {{ post.title }}</h6>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
Does Cycle method is good to implement here ? If Yes then how ?
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>