How to fix column height and width using CSS

Question

i'm developping an e-commerce web site where all the products are displayed in the same page in "cols" the problem is that i couldn't fix the col width or height using CSS

<div class="container">
  <div class="row">
    <!-- BEGIN PRODUCTS -->
    <div
      class="col-md-3 col-sm-6 col-equal"
      *ngFor="let p of (titres | sort: titreSort)"
    >
      <span class="thumbnail">
        <img src="{{ p.URL_couv }}" alt="{{ p.id }}" />
        <h4>
          <label style="display: block; width: 600px;"
            >{{ p.titre }} n° {{ p.numero }}</label
          >
        </h4>

        <p></p>
        <hr class="line" />
        <div class="row">
          <div class="col-md-6 col-sm-6">
            <p class="price"></p>
          </div>
          <div class="col-md-6 col-sm-6"></div>
        </div>
      </span>
    </div>
  </div>
</div>

this is my code

and this is how the products are showing

and this is my CSS code

   

.side-body {
  margin-left: 310px;}
   
.right {
  float: right;
  border-bottom: 2px solid #4b8e4b;
}

.thumbnail {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.thumbnail:hover {
  opacity: 1;
  box-shadow: 0px 0px 10px #41d834;
}
.line {
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  .col-equal {
    margin: auto;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
  }
}

Any help please ? Thank you

Possible duplicate of [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Maihan Nijat, Feb 15 '19 at 13:40

score 2 · Accepted Answer · answered Feb 15 '19 at 13:27

2

Try to give min-height to h4, so all the products description will have the same height.

answered Feb 15 '19 at 13:27

gikall

559
5
16

Can you show us what you've tried? So we can help you better. – ElusiveCoder Feb 15 '19 at 13:36
If I have long text in `h4` will this work if text wrap to next line? – Maihan Nijat Feb 15 '19 at 13:41

score 1 · Answer 2 · answered Feb 15 '19 at 13:25

1

Try setting a min-height to the textblok under the image (description) I think this will solve your problem

answered Feb 15 '19 at 13:25

Jorn Barkhof

264
1
16

score 1 · Answer 3 · answered Feb 15 '19 at 13:27

1

seems you are adding all inside the so you need to make the span tag as block or inline-block element

use:

.thumbnail{
display:inline-block;
width:your-width-value;
height:your-height-value;
}

answered Feb 15 '19 at 13:27

Amit Golhar

799
4
8
21

Maihan Nijat · Answer 4 · 2019-02-15T13:34:08.290

0

Bootstrap has .row-eq-height for setting equal height on all columns in a row. However, this is not supported by internet explorer.

<div class="container">
  <div class="row row-eq-height">

This could be also fixed by setting flex-wrap: wrap; on the row.

Reference: http://getbootstrap.com.vn/examples/equal-height-columns/

edited Feb 15 '19 at 13:34

answered Feb 15 '19 at 13:29

Maihan Nijat

9,054
11
62
110

score 0 · Answer 5 · edited Feb 15 '19 at 13:42

0

To me it appears that you do not use Bootstrap V4, but in fact V3.

Bootstrap V3 uses float: left, while Bootstrap V4 uses display: flex

codepen.io/HerrSerker/pen/xMyyoM uses Bootstrap V3 (with the issue)
codepen.io/HerrSerker/pen/vbVQYO uses Bootstrap V4 (without the issue)

edited Feb 15 '19 at 13:42

Maihan Nijat

9,054
11
62
110

answered Feb 15 '19 at 13:38

yunzen

32,854
11
73
106

How to fix column height and width using CSS

5 Answers5