Need text at the same height in all the divs

Question

I am using angular and bootstrap4, I have few rows inside the divs How do I keep line1 text always at the same height so that if any div has a line0 then all the line1 text in all divs will go down and remain always in the same line?

<div *ngFor="let account of clientAccounts" >

          <h6 class="card-title customCardTitle">{{ account.number }}</h6>

          <h1 class="card-subtitle"> {{ account.cash }} </h1>

       </div>

so if account.number has more then 0 lines then account.cash is not aligned horizontally , this is what I am missing.

.customCardTitle has white-space: pre-line

at the end I need to prevent this, and keep cash information in the same line

give same class to every line 1 and check the position of line relative to the box dynamically and get higher distance and put it — Nisharg Shah, Dec 27 '19 at 13:01
You will have to do this thorugh JS I think... But please, give us some code :) — Kalabalik, Dec 27 '19 at 13:03
Here is a post with something similar: https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height. Also, I solved my issue like this using bootstrap card decks without a title. https://getbootstrap.com/docs/4.3/components/card/#card-decks — Dean, Dec 27 '19 at 13:08
So, correct me if im wrong... But if account.number is more than one object, then show account.cah... And account.cash should always be on the same height inside the div, lets say bottom..? — Kalabalik, Dec 27 '19 at 13:11
Wouldn´t a solution be to have the .cash on bottom always?... — Kalabalik, Dec 27 '19 at 13:25
@Kalabalik partially yes, but then divs must have also the same size, so if one will have more text and will resize, the other should too. — kosnkov, Dec 27 '19 at 13:26
That will Bootstrap do for you.. Just wrap the divs in a row and then class them col. — Kalabalik, Dec 27 '19 at 13:33

score 3 · Answer 1 · answered Dec 27 '19 at 13:08

3

Bootstrap row will contain flex property. With that only we can able to use flex properties for child divs

align-items-center will center the content inside cols

<div class="container">
  <div class="row align-items-center">
    <div class="col-3"><span>test</span></div>
    <div class="col-3"><span>test</span></div>
  </div>
</div>

Now code will center the text vertically, But within the container height. It won't be center to your html page.

To make Your text to center of your page, make row div to full height 100vh

answered Dec 27 '19 at 13:08

Awais

4,752
4
17
40

@Kalabalik Actually it need to b align vertically form coding prospective form UI it is horizontally aligned – Awais Dec 27 '19 at 13:16
Ether way, the centering was not part of the question..? – Kalabalik Dec 27 '19 at 13:24
Well in that case as he update his question rather then align item center use align item space between.. as he can play with flex align properties – Awais Dec 27 '19 at 14:21

Ahed Kabalan · Accepted Answer · 2019-12-30T08:49:33.053

.wrap{
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.card{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 400px;
    background: gray;
    margin: 10px;
    padding: 20px;
    color: #FFF;
}
.card-title{
    flex: 1;
}

<div class="wrap">

    <div class="card">

      <h6 class="card-title customCardTitle">AT0080456789 (Aco)</h6>

      <h1 class="card-subtitle">$ 1,557</h1>

   </div>

   <div class="card">

      <h6 class="card-title customCardTitle">AT0080456789 (Aco) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</h6>

      <h1 class="card-subtitle">$ 2,357</h1>

   </div>

   <div class="card">

      <h6 class="card-title customCardTitle">AT0080456789 (Aco) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua</h6>

      <h1 class="card-subtitle">$ 557,256</h1>

   </div>

</div>

no way, this looks ok in your example only because you set hight to 30 px, if you put more text it will overflow, but it should extend each divs.this is not a solution — kosnkov, Dec 30 '19 at 07:38

Need text at the same height in all the divs

2 Answers2