부트스트랩 5 자주 쓰는 클래스 정리

컨테이너
container 마진이 적용된 컨테이너 (반응형)

이미지 
img-fluid 반응형 이미지
rounded-circle 둥근 이미지

텍스트 
text start 좌측정렬
text end 우측정렬
fw-bold 볼드체
fs-1  폰트크기
display-4 fs-1 보다 큰 글씨체
Small 작은 텍스트

text-info 텍스트 색상 
text-warning 텍스트 색상 
text-dark 텍스트 색상 
text-muted 텍스트 색상 (회색)
text-center text-sm-start 기본적으로는 텍스트를 중앙에 정렬하고 디바이스 크기가 좀 더 커지면 왼쪽으로 정렬함

배경색
bg-dark 배경색 설정
bg-opacity-75 배경색 투명도 설정 
opacity-50 투명도 50%

버튼 
btn-info 버튼색상 
btn-warning 버튼색상
btn btn-outline-dark 아웃라인 버튼
btn btn-outline-info rounded-pill 둥근 버튼

마진
m (margin) 전체마진
ms (margin-start) 좌측마진
me (margin-end) 우측마진
mt  (margin-top) 위쪽마진
mb (margin-bottom) 아래쪽마진
my (margin-top & margin-bottom) 위아래 마진
mx (margin left & margin-right) 좌우 마진

패딩 
p (padding) 전체패딩
ps (padding-left) 좌측패딩
pe (padding-end) 우측패딩 
pt (padding-top) 위쪽패딩
pb (padding-bottom) 아래쪽패딩
py (padding-top & padding-bottom) 위아래패딩
px (padding-left & padding-right) 좌우패딩

shadow-lg 그림자 적용
rounded-5  둥근 모서리 (border-radius)
rounded-pill 둥근 버튼

레이아웃 
w-75 최대너비 설정(max-width 75%)
m-auto 가로정렬 margin: auto
vh-100 뷰포트 높이 100%
w-75 m-auto 수평 정렬

position-relative position: relative
position-absolute position: absolute 
position-absolute top-0 start-100 위치 조정
translate-middle translate(-50%, -50%)

플럭스 
d-flex  플럭스박스 
justify-content-center 메인축 정렬
align-items-center 교차축 정렬

그리드 시스템 (플럭스 기반)

한 행을 12개의 열로 쪼개서 일정 비율만큼 차지한다. row col-5 col-7
col-sm-6 576px 이상에서만 col-6
col-lg-6 992px 이상에서만 col-6
col-xl-5 화면이 더 커져서 1200px 이상이 되면 더 적은 크기를 차지한다
col-xl-5 요소가 두개이면 10개의 그리드만 사용한다
row vh-100 justify-content-center align-items-center 중앙 정렬

거터 (row g-3)
grid 시스템에서 넣어주는 위아래 여백
flex wrap 을 적용해서 카드가 아래로 내려온 경우 카드 사이에 여백이 없을때 적용 가능
row-gap col-gap grid-gap 이랑 같은 개념

반응형웹 (브레이크포인트)
sm 576px 이상
md 768px 이상
lg 992px 이상
xl 1200px 이상
xxl 1400px 이상