Bootstrap 4 Make Each Column Equal Size?

Question

I am trying to make a product page and have been playing around with different configurations in Bootstrap 4 and almost have it perfect now, but I just have one small problem.

Basically I am using the below code:

<div class="row row-spacing">
  <div class="col-sm ml-2 mb-2 product_cell">
    <img class="product_image" src="images/products/coke_can.png">
    <hr>
    <p class="product_name" style="text-align: center">Coca Cola 300 ml</p>
    <p class="product_price">€0.80</p>
  </div>
  <div class="col-sm ml-2 mb-2 product_cell">
    <img class="product_image" src="images/products/coke_can.png">
    <hr>
    <p class="product_name" style="text-align: center">Coca Cola 300 ml</p>
    <p class="product_price">€0.80</p>
  </div>
  .... ....
</div>

The products come out (almost) perfect like below:

However, the last products on the last line always try to stretch out to the full width of the page, I don't want this, I want each product to be exactly the same width and height. How do I fix this?

I am using various screen sizes, from iPads to desktop PC's so I don't think I can hard code how many products will appear on a single row, I need bootstrap to dynamically decide the widths and how many it will fit and then make sure they are all equal widths.

Related if not duplicate - https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid — Paulie_D, Jan 26 '18 at 11:08
or - https://stackoverflow.com/questions/42176419/targeting-flex-items-on-the-last-row — Paulie_D, Jan 26 '18 at 11:08
Those two examples don't look like they are using Bootstrap 4 in either case. This question is specifically about how we can achieve this using Bootstrap 4. — KillerKode, Jan 26 '18 at 11:20
@Klooven, This may be what I was looking for! Can you please post this as I may accept this, the only issue is that it does not take the full width by resizing each product width, instead it appears to take the minimum width of each product. If I had dynamic products (e.g. some with larger text) would each box be different size or will this ensure each box is equal size regardless? — KillerKode, Jan 26 '18 at 11:22

WebDevBooster · Accepted Answer · 2018-01-26T11:26:46.893

Your best bet is to use col-auto like so:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-auto ml-2 mb-2 product_cell">
            <img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
            <p class="product_name">Coca Cola 300 ml</p>
            <p class="product_price">€0.80</p>
        </div>
        <div class="col-auto ml-2 mb-2 product_cell">
            <img class="product_image" src="https://placeimg.com/120/150/animals"><hr>
            <p class="product_name">Coca Cola 300 ml</p>
            <p class="product_price">€0.80</p>
        </div>
        <div class="col-auto ml-2 mb-2 product_cell">
            <img class="product_image" src="https://placeimg.com/140/150/animals"><hr>
            <p class="product_name">Coca Cola 300 ml</p>
            <p class="product_price">€0.80</p>
        </div>
        <div class="col-auto ml-2 mb-2 product_cell">
            <img class="product_image" src="https://placeimg.com/160/150/animals"><hr>
            <p class="product_name">Coca Cola 300 ml</p>
            <p class="product_price">€0.80</p>
        </div>
        <div class="col-auto ml-2 mb-2 product_cell">
            <img class="product_image" src="https://placeimg.com/180/150/animals"><hr>
            <p class="product_name">Coca Cola 300 ml</p>
            <p class="product_price">€0.80</p>
        </div>
        <div class="col-auto ml-2 mb-2 product_cell">
            <img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
            <p class="product_name">Coca Cola 300 ml</p>
            <p class="product_price">€0.80</p>
        </div>
        <div class="col-auto ml-2 mb-2 product_cell">
            <img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
            <p class="product_name">Coca Cola 300 ml</p>
            <p class="product_price">€0.80</p>
        </div>
        <div class="col-auto ml-2 mb-2 product_cell">
            <img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
            <p class="product_name">Coca Cola 300 ml</p>
            <p class="product_price">€0.80</p>
        </div>
        <div class="col ml-2 mb-2 product_cell">
            <img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
            <p class="product_name">Coca Cola 300 ml</p>
            <p class="product_price">€0.80</p>
        </div>
        <div class="col ml-2 mb-2 product_cell">
            <img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
            <p class="product_name">Coca Cola 300 ml</p>
            <p class="product_price">€0.80</p>
        </div>
    </div>
</div>

Thanks, I changed it to just "col" and still get exactly the same result unfortunately. I was under the impression col-sm existed, thanks for clarifying that. — KillerKode, Jan 26 '18 at 10:41
That's part of the problem, I don't know. Because if I browse the site on a mobile phone, I can only fit 1, but if I browse on my desktop PC, I can fit 8. So I wanted bootstrap to figure that out automatically rather than me specify exactly how many should be on each one. Will that not force them to stack on top of each other if they overflow? Rather than stack side by side? — KillerKode, Jan 26 '18 at 10:44
I think you are onto something, I changed it to col-sm-3 to add 4 to each width and it seems to be behaving how I expect, except the only problem is the ml-2 is forcing the last element to go onto the next line. So I have a massive whitespace at the right side. — KillerKode, Jan 26 '18 at 10:53
Can you post your code please in the question, so I can take a look. — WebDevBooster, Jan 26 '18 at 10:54
Almost there! I have added more data to one of the products (as naturally when I have multiple products their sizes will vary) and I can see the product cells are getting wider in some cases. I need them all to be equal width. This does not ensure that. — KillerKode, Jan 26 '18 at 11:32
Aha! So, you will have images of different sizes but you need all of them to be equal width, correct? — WebDevBooster, Jan 26 '18 at 11:35
Well the images are same size, 100 x 100. But I found a fix, I set the max text width (which will always change) to 100 px so it wraps downwards and that has exactly what I am looking for. Thank you for your help, will mark as answer! — KillerKode, Jan 26 '18 at 11:37

Bootstrap 4 Make Each Column Equal Size?

1 Answers1