Restricting the number of blocks in each row using Django and Bootstrap

Question

Restricting the number of blocks in each row using Django and Bootstrap

I'm working on a webpage where each item is represented by a bootstrap card. In my template, I use a loop to create cards for each item. However, I'm facing an issue - how can I restrict the number of cards displayed in a single row before moving on to the next one?

 <div class = 'card-group'>
{% for plant in plant%}
{% if plant.available%}
<div class="card text-white bg-dark mb-3" style=''>
  <img style='height: auto; max-width: 100%;' src="{{plant.thumbnail}}" alt="...">
  <div class="container">
    <h4 style='color:white;' class="card-title"><b>{{plant.name |title}}</b></h4>
    <p style='font-size: 20px'>Soil: {{plant.soil |title}}</p>
    <p style='font-size: 20px'>Price per unit: £{{plant.price |title}}</p>
  </div>
  <div class='button-section'>
  <button class="order-button"><a href=''>Order Online</a></button>
  </div>
</div>

{% endif %}
{% endfor %}
</div>

The current CSS styling for the cards is as follows:

.card {
    margin: 10px;
    display: flex;
}

.card-group {
    justify-content: space-evenly;
}

(card title styles...)

.card-body {
    text-align: left;
}

(card button styles...)

My goal is to have only four items displayed per row, and then move on to the next row with the rest of the items. Any suggestions on how to achieve this layout?

html css django bootstrap-4

Answer 1

Answer №1

In Bootstrap, each row is made up of 12 columns in total. For example, if your container is set to col-4, the div will print out 3 columns per row since 4x3 equals 12. On the other hand, setting it to col-2 would result in 6 smaller divs per row as 2x6 also equals 12.

Answer 2

In Bootstrap, each row is made up of 12 columns in total. For example, if your container is set to col-4, the div will print out 3 columns per row since 4x3 equals 12. On the other hand, setting it to col-2 would result in 6 smaller divs per row as 2x6 also equals 12.

Answer 3

Answer №2

To achieve this layout, you can utilize the forloop.counter and divisibleby template tags in your code. Here's an example implementation:

{% for item in items %}

  {% if forloop.counter0|divisibleby:"4" %}
    <div class="row">
  {% endif %}

  {% if forloop.counter0|divisibleby:"4" %}
    </div>
  {% endif %}

{% endfor %}

Alternatively, you can handle this logic within your views using the following approach:

rows = []
items = [1, 2, 3, 4, 5, 6, 7, 8, 9]  # Assume these are retrieved from Item.objects.all() etc.
per_row = 4

i = 0
while True:
    row_items = items[i * per_row : (i + 1) * per_row]
    if not row_items:
        break
    rows.append(row_items)
    i += 1
print(rows)

After running the provided code snippet, the output will be

[[1, 2, 3, 4], [5, 6, 7, 8], [9]]

. This results in nested lists, requiring two for loops in the template to iterate through.

Answer 4

To achieve this layout, you can utilize the forloop.counter and divisibleby template tags in your code. Here's an example implementation:

{% for item in items %}

  {% if forloop.counter0|divisibleby:"4" %}
    <div class="row">
  {% endif %}

  {% if forloop.counter0|divisibleby:"4" %}
    </div>
  {% endif %}

{% endfor %}

Alternatively, you can handle this logic within your views using the following approach:

rows = []
items = [1, 2, 3, 4, 5, 6, 7, 8, 9]  # Assume these are retrieved from Item.objects.all() etc.
per_row = 4

i = 0
while True:
    row_items = items[i * per_row : (i + 1) * per_row]
    if not row_items:
        break
    rows.append(row_items)
    i += 1
print(rows)

After running the provided code snippet, the output will be

[[1, 2, 3, 4], [5, 6, 7, 8], [9]]

. This results in nested lists, requiring two for loops in the template to iterate through.

Answer 5

Answer №3

It worked like a charm

<section class="row row-cols-2 row-cols-lg-6 g-3">

Answer 6

It worked like a charm

<section class="row row-cols-2 row-cols-lg-6 g-3">

Restricting the number of blocks in each row using Django and Bootstrap

Answer №1

Answer №2

Answer №3

Similar questions

Tips for utilizing external CSS solely within a designated section

Repositioning with Flexbox: shifting the middle element to a new line

`Gradient blending in ChartJS`

Is it possible to add padding to an HTML element without affecting its overall dimensions?

What is the best way to vertically align an InputLabel within a MUI Grid item?

Easily toggle between different content within the same space using Twitter Bootstrap Tabs feature. Display the tabs

Using Docker Compose for both production and development environments

Adding a special ie7 glow effect to hyperlinks

Enhance the functionality of your website by implementing a zoom feature

Struggling with Django relationships?

The specified 'image' identifier has not been defined. There is no such member within 'never'

Column div being obscured by footer

Encircle a particular row in a table with a border

What is the process for calling a class in HTML from a <Div> tag?

Using the Jquery validation plugin for Internet Explorer 9 when the website first loads

Using PHP, HTML, and JavaScript to generate a dropdown list from a database

Does the downloading of images get affected when the CSS file has the disabled attribute?

The integration of Angular CLI with SCSS is no longer a separate process -

Moving a button to the right side in HTML/CSS without creating any gaps

The parser for PHP CSS struggles with interpreting semicolons within property values