CODEWITHSUNDEEP
htmlcssbootstrap-4
Bishu
Bishu

Reputation: 133

Bootstrap with 3 column having same height for all row

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>

  1. div height depend on the Icon size of the particular row only
    I want all the height equal even if there is no Icon

  2. 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

  3. Icon and text align
    I want to put the text just below ICON, with both the ICON and text in Horizontal and Vertical centre.

Upvotes: 1

Views: 1708

Answers (2)

sanoj lawrence
sanoj lawrence

Reputation: 993

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>

Upvotes: 1

Elham Dabiri
Elham Dabiri

Reputation: 415

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>

Upvotes: 1

Related Questions