How to make bootstrap cards same height in card, 카드 높이 고정하는 방법

문제상황

여러개의 card 컴포넌트들을 included 하고 있는 화면을 작업중이였는데, div tag 와 겹쳐져서 height가 약간 틀어지는 상황이 발생했다. 그래서 열심히 구글링을 했다!

1번 방법

https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height

위 사이트에서 다음과 같은 코드를 얻을 수 있었다.

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

text용으로 text.html을 만들어 위 코드를 활용할 경우에는 잘 작동했지만, 작업하던 코드와 합치려고 하면 원하는 모양대로 나오지 않았다. 그래서 다시 구글링을 했다. 더 상세한 키워드로 ..

2번 방법

https://stackoverflow.com/questions/35868756/how-to-make-bootstrap-4-cards-the-same-height-in-card-columns

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

h-100 를 class 속성에 추가해주었더니 매우 간단하게 해결 되었다. 😅😅😅 프로젝트 코드 내에서는 거의 8개의 카드 컴포넌트가 있어서, row 속성에 mb-3 정도의 마진을 추가해주니 아주 예쁘게 잘 맞게 정렬됨! 짝짝짝!!!

생각

추후에 생각을 해봤는데, 첫번째 방법을 사용해도 적용이 가능할 것 같다. row에 mb-3을 주는 방법을 또 몰라서 헤매다가 2번을 찾은 거였는데 .. (그냥 1번 코드의 잘못이라고 생각했음ㅋㅋㅋㅋ)
2번 방법을 적용하던 도중 불현듯 마진 설정하는 방법이 떠올라서 적용하니까 완벽하게 된 것을 보니...아마도 적용이 가능할 것이라고 본다.

하지만 2번 방법은 굉장히 간단한 코드 몇자를 통해 해결 가능하니 이런 문제가 발생하면 2번 방법을 쓰는 걸로 ! 👍