Bootstrap with 3 column having same height for all row

Question

I m trying to create a 3 column div which should have equal height for all the responsive/rows which contain a ICON and a information

<div class="container">
  <div class="row row-eq-height">
    <div class="col col-4 border">
        <i class="fas fa-home fa-5x"></i>
        <span>Column1</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-file-invoice fa-5x"></i>
        <span>Column2</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-exchange-alt fa-5x"></i>
        <span>Column3</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-gamepad fa-5x"></i>
        <span>Column4</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-users fa-5x"></i>
        <span>Column5</span>
    </div>
    <div class="col col-4 border">Column6</div>
    <div class="col col-4 border">Column7</div>
    <div class="col col-4 border">Column8</div>
    <div class="col col-4 border">Column9</div>
    <div class="col col-4 border">Column10</div>
  </div>
</div>

div height depend on the Icon size of the particular row only
I want all the height equal even if there is no Icon
Icon size is fixed to fa-5x
how can i change the size of the icon according to the browser size.
example sm-3x, md-4x, lg-5x, xl-6x
Icon and text align
I want to put the text just below ICON, with both the ICON and text in Horizontal and Vertical centre.

Your answer is in this link: [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) — Elham Dabiri, Jul 21 '20 at 04:31
Thanks for your link. I have gone through it and it helps me a lot with new ideas. But in that case also the height is depend on the row which have the highest height. but I want all the height to be same even if the 3 rows contains only a little character. — Bishu, Jul 21 '20 at 06:24

score 1 · Accepted Answer · answered Jul 21 '20 at 06:40

1

You can add these style to your code: I checked this in responsive mode.

<style>
    .col-4{
    min-height: 100px;
    text-align: center;
    }
    .col-4 span{
      display:block
    }
    .col-4 i{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
    </style>

answered Jul 21 '20 at 06:40

Elham Dabiri

435
2
9

Thanks @elham-dabiri now all the designed is working perfect except the Vertical Align Center. I try using the class "align-middle" but it does not work. – Bishu Jul 21 '20 at 12:00
Add these style (display: grid; align-items: center;) to .col-4 – Elham Dabiri Jul 22 '20 at 05:18

score 0 · Answer 2 · answered Jul 21 '20 at 07:30

The solution am using to make equal height is adding class h-100 to card and placing and placing inside col-* attr this make all card align auto height.

check below snippet :

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="card h-100">
        <h4 class="my-2">column 1</h4>
      </div>
    </div>

    <div class="col-4">
      <div class="card mb-4 h-100">
        <h4 class="my-2">column 2</h4>
        Div with larger content that extents to equal height of all div
      </div>
    </div>

    <div class="col-4">
      <div class="card h-100">
        <h4 class="my-2">column 3</h4>
      </div>
    </div>
  </div>
</div>

Bootstrap with 3 column having same height for all row

2 Answers2