Using Bootstrap to horizontally align cards in a single row

Question

Using Bootstrap to horizontally align cards in a single row

When rendering the 4 items in a row using a for loop, I encounter an issue where the first line renders 4 items correctly but subsequent items are rendered on separate lines.

code

<div class="card-group">

    {% for item in wt %}

          <div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">

            <img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{item.product_name}}</h5>
              <p class="card-text">{{item.thumbnail_desc}}</p>

              <a href="blog_detail/{{item.post_id}}" class="btn btn-primary">View Product</a>


            </div>
          </div>

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

   {% endfor %}

In this implementation, I am utilizing both Bootstrap and Django frameworks. Despite trying to use the "row" class, it does not resolve the issue entirely.

css django twitter-bootstrap bootstrap-4 django-templates

Answer 1

Answer №1

Automatically arranging 4 items in a row without the need for extra coding:


{% for item in wt %}
    <div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">
        <img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">{{item.product_name}}</h5>
            <p class="card-text">{{item.thumbnail_desc}}</p>
            <a href="blog_detail/{{item.post_id}}" class="btn btn-primary">View Product</a>
        </div>
    </div> 
{% endfor %}

If this doesn't work, consider using the "col-md-3" class instead of "my-3".

Please let me know if this solves the issue.

Answer 2

Automatically arranging 4 items in a row without the need for extra coding:


{% for item in wt %}
    <div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">
        <img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">{{item.product_name}}</h5>
            <p class="card-text">{{item.thumbnail_desc}}</p>
            <a href="blog_detail/{{item.post_id}}" class="btn btn-primary">View Product</a>
        </div>
    </div> 
{% endfor %}

If this doesn't work, consider using the "col-md-3" class instead of "my-3".

Please let me know if this solves the issue.

Answer 3

Answer №2

By adjusting the size of the card and incorporating a counter for the forloop, I was able to resolve the issue where the card was not fitting inside the container.

<h2 class="my-4 text-white bg-dark">New Arrivals</h2>
            <div class="row">
         {% for item in wt %}

          <div class="card text-white bg-dark mb-3" style="width: 10rem;">

            <img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{item.product_name}}</h5>
              <p class="card-text">{{item.thumbnail_desc}}</p>

              <a href="detail/{{item.post_id}}" class="btn btn-primary">View Product</a>


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

   {% endfor %}

        </div>

Answer 4

By adjusting the size of the card and incorporating a counter for the forloop, I was able to resolve the issue where the card was not fitting inside the container.

<h2 class="my-4 text-white bg-dark">New Arrivals</h2>
            <div class="row">
         {% for item in wt %}

          <div class="card text-white bg-dark mb-3" style="width: 10rem;">

            <img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{item.product_name}}</h5>
              <p class="card-text">{{item.thumbnail_desc}}</p>

              <a href="detail/{{item.post_id}}" class="btn btn-primary">View Product</a>


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

   {% endfor %}

        </div>

Using Bootstrap to horizontally align cards in a single row

Answer №1

Answer №2

Similar questions

Encounter an unforeseen token ), within the webpack configuration

Adjusting the size of HighCharts HighMaps with a custom function

Looking for guidance on JavaScript - Implementing a different font family for each div element

Exploring Django's Media File Configuration and Organization

Leverage the power of personalized SCSS styles in combination with Bootstrap-Vue, Webpack, and

Use CSS3 to hide the <li> elements initially and make them appear when the <li> is clicked on

What is the best way to include a background image in a div within a React component?

Container will keep items from spreading out

Show concealed elements above everything else

What is the deal with CSS relative magnification?

React modal image showing a misaligned image upon clicking

The list-image is nowhere to be found

What is the reason behind a stationary lightbox sticking to the top of the webpage rather than the top of the viewport?

Setting a default currency value (either in dollars or euros) in an input field

background with alternating stripes to decorate the border of a div

In what way is the background-color of WindowInfoBackground utilized?

Can IE Conditional Comments have a negative impact on page speed?

Move the aircraft across the display in a lively animation

Creating a responsive design for a cropped image using CSS

Creating dynamic grids in React.js by utilizing HTML