레이아웃 관련
container- 콘텐츠를 가운데 정렬
- 고정 너비 설정
container-fluid- 전체 너비로 확장
row- 그리드 시스템의 행 생성
col-{breakpoint}-{size}- 컬럼 크기 설정
- 예:
col-md-6(중간 화면에서 절반 크기)
버튼 관련
btn- 버튼 기본 스타일 적용
btn-primary- 파란색 버튼 (기본 스타일)
btn-secondary- 회색 버튼
btn-danger- 빨간색 버튼 (경고용)
btn-lg/btn-sm- 큰 버튼 / 작은 버튼
텍스트 관련
text-center- 텍스트 가운데 정렬
text-left- 텍스트 왼쪽 정렬
text-right- 텍스트 오른쪽 정렬
text-primary- 파란색 텍스트
font-weight-bold- 굵은 텍스트
배경 관련
bg-primary- 파란색 배경
bg-secondary- 회색 배경
bg-light- 밝은 배경
bg-dark- 어두운 배경
간격 관련
m-{size}- 외부 여백 (Margin)
- 예:
m-3(전체 여백 3)
p-{size}- 내부 여백 (Padding)
- 예:
p-4(전체 여백 4)
mt-{size}/mb-{size}- 위쪽 / 아래쪽 여백
ml-{size}/mr-{size}- 왼쪽 / 오른쪽 여백
유틸리티 클래스
d-flex- Flexbox 컨테이너 생성
justify-content-center- Flexbox 콘텐츠 가운데 정렬
align-items-center- Flexbox 콘텐츠 세로 가운데 정렬
rounded- 요소에 둥근 모서리 적용
shadow- 그림자 효과 추가
Share article