1. Grid align

• 부트스트랩은 flex-box 기반으로 만들어졌기 때문에, flex-box에서 사용하는
  정렬 기능을 사용할 수 있습니다..

1.1 수직 정렬(align-items)

<h1 class="display-4">Grid Alignment</h1>
        <div class="row align-items-start">
            <div class="col-md-6 bg-danger col-xl-3">텍스트더미</div>
            <div class="col-md-6 bg-warning col-xl-3">텍스트더미</div>
            <div class="col-md-6 bg-success col-xl-3">텍스트더미</div>
            <div class="col-md-6 bg-info col-xl-3">텍스트더미</div>
        </div>

<!--
수직정렬 기능을 사용하면 가장 높이가 큰 요소에 나머지 요소들이 사이즈가 맞춰지지 않고
각각 요소의 크기만큼만 높이가 적용됩니다.

align-items-start
요소들의 교차축 시작부분을 상단으로 정렬

align-items-center
요소들의 교차축 시작부분을 중간으로 정렬

align-items-end
요소들의 교차축 시작부분을 하단으로 정렬
-->

1.1.1 align-self

 <h1 class="display-4">Grid Alignment</h1>
        <div class="row align-items-center">
            <div class="col-md-6 bg-danger col-xl-3">텍스트더미</div>
            <div class="col-md-6 bg-warning col-xl-3">텍스트더미</div>
            <div class="col-md-6 bg-success col-xl-3">텍스트더미</div>
            <div class="col-md-6 bg-info col-xl-3 align-self-end">텍스트더미</div>
        </div>

<!--
align-self를 사용하면 요소 하나만 독립적으로 정렬기능을 처리할 수 있습니다.
-->

1.2 수평 정렬(justify-content)

<h1 class="display4">Justify Content</h1>
        <div class="row border justify-content-end">
            <div class="col-4 bg-primary">텍스트더미</div>
            <div class="col-4 bg-warning">텍스트더미</div>
        </div>

<!--
justify-content-end
메인축의 시작점을 우측으로 지정

justify-content-center
메인축의 시작점을 중간으로 지정

justify-content-start
메인축의 시작점을 좌측으로 지정
-->

1.2.1 반응형 수평 정렬

  <h1 class="display4">Justify Content</h1>
        <div class="row border justify-content-md-center justify-content-lg-between">
            <div class="col-md-4 bg-primary">텍스트더미</div>
            <div class="col-md-4 bg-warning">텍스트더미</div>
        </div>

<!--
뷰포트의 너비가 미디움 이상이라면 요소마다 4유닛을 사용하고, 이하라면 가로행을 모두 사용해서
2줄로 표시하게 합니다.

border
박스에 테두리 생성

justify-content-center
메인축 기준으로 요소를 중앙으로 정렬

justify-content-lg-between
메인축 기준으로 컨테이너 크기가 라지사이즈가 되면 요소를 컨테이너 양 끝에 정렬
-->