Alignment

vertical alignment 

<div class="container">
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

 

1. row class를 가진 컴포넌트는 flex box로 지정되어있다.
2. cross 축의 배치를 helper 클래스를 지정함으로써 설정할 수 있다. 
   • align-items-start | 기본값 
   • align-items-center
   • align-items-end

horizontal alignment 

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

 

• main 축의 배치를 결정할 수 있다. 
  • justify-content-start | 기본값 
  • justify-content-end 
  • justify-content-center
  • justify-content-around
  • justify-content-between
  • justify-content-evenly
• justify-content-lg-between | 너비가 lg 이상일 때에는 between을 적용한다. 

+) flex utilities