Bootstrap 치트시트
검색하고 인쇄할 수 있는 Bootstrap 5.3 참조 자료——그리드, 간격, 타이포그래피, 색상, 플렉스 유틸리티, 버튼, 폼, 컴포넌트. 무료.
그리드 및 레이아웃
12<div class="container">
고정 너비 반응형 컨테이너
<div class="container-fluid">
모든 브레이크포인트에서 전체 너비 컨테이너
<div class="container-md">
md 브레이크포인트까지 100% 너비
<div class="row">
그리드 행, 열을 담음
<div class="col">
동일 너비 자동 열
<div class="col-6">
12열 중 6열 차지
<div class="col-md-4">
md 브레이크포인트 이상에서 4열
<div class="col-auto">
콘텐츠에 맞춘 크기의 열
<div class="offset-md-2">
열을 오른쪽으로 2열 밀기
<div class="row g-3">
열 사이 거터 간격
<div class="row row-cols-3">
행당 동일한 3열 강제
<div class="order-2">
flex/grid 열 재정렬
간격 유틸리티
12m-3
모든 방향 마진 (스케일 0-5)
mt-2
위쪽 마진
mx-auto
가운데 정렬용 자동 가로 마진
p-4
모든 방향 패딩
py-2
세로 패딩 (위아래)
ms-3
시작 마진 (LTR에선 왼쪽, RTL 인식)
me-3
끝 마진 (LTR에선 오른쪽, RTL 인식)
ps-2
시작 패딩, RTL 인식
pe-2
끝 패딩, RTL 인식
gap-3
flex/grid 항목 사이 간격
m-n1
음수 마진
p-md-5
md 이상부터 반응형 패딩
타이포그래피
14<h1>..<h6>
기본 스타일의 제목 레벨
<p class="display-1">
큰 디스플레이 제목 (display-1..6)
<p class="lead">
눈에 띄는 리드 문단
fw-bold
굵은 글꼴 두께
fw-semibold
세미볼드 글꼴 두께
fst-italic
이탤릭 글꼴 스타일
text-center
텍스트 가운데 정렬
text-start
텍스트 시작 정렬, RTL 인식
text-end
텍스트 끝 정렬, RTL 인식
text-truncate
말줄임표로 넘침 자르기
text-uppercase
텍스트를 대문자로 변환
fs-1
반응형 글꼴 크기 (fs-1..6)
lh-base
기본 줄 높이 (lh-1, lh-sm, lh-lg)
font-monospace
고정폭 글꼴 패밀리
색상과 배경
10text-primary
기본 텍스트 색상
bg-primary
기본 배경 색상
bg-primary-subtle
은은한 기본 배경 색조
text-primary-emphasis
강조 기본 텍스트, 테마 인식
text-bg-primary
자동 대비 텍스트의 기본 배경
link-primary
유색 링크 헬퍼
bg-opacity-50
배경 불투명도 50% 적용
text-body-secondary
흐린 보조 본문 텍스트
text-body-emphasis
고강조 본문 텍스트
border-primary-subtle
은은한 기본 테두리 색상
Flex 유틸리티
10d-flex
플렉스 컨테이너 생성
flex-row
항목을 행으로 배치
flex-column
항목을 열로 배치
justify-content-between
주 축을 따라 항목 간격 배치
align-items-center
교차 축에서 항목 가운데 정렬
flex-wrap
항목 줄바꿈 허용
flex-grow-1
항목이 공간을 채우도록 확장
flex-fill
동일한 유연 너비 강제
align-self-end
단일 항목을 끝으로 정렬
flex-md-row
md부터 반응형 flex 방향
Display 및 위치
12d-none
요소 숨기기
d-md-block
md 브레이크포인트부터 블록으로 표시
position-relative
상대 위치 지정
position-absolute
절대 위치 지정
position-fixed
고정 위치 지정
position-sticky
스티키 위치 지정
top-0 start-0
좌상단 고정, RTL 인식
translate-middle
transform translate로 가운데 정렬
fixed-top
요소를 뷰포트 상단에 고정
sticky-top
스크롤 시 상단에 고정
z-3
z-index 설정 (z-0..3)
invisible
숨기되 레이아웃 공간 유지
크기 및 테두리
12w-100
부모의 너비 100%
w-50
부모의 너비 50%
h-100
부모의 높이 100%
mw-100
최대 너비 100%
vh-100
뷰포트 높이 100%
border
모든 방향에 기본 테두리 추가
border-0
모든 테두리 제거
border-primary
테두리 색상 지정
rounded
기본 border-radius
rounded-pill
완전히 둥근 알약 모양
rounded-circle
원형 border-radius
shadow-sm
작은 박스 그림자 (shadow, shadow-lg)
버튼
9<button class="btn btn-primary">
솔리드 기본 버튼
<button class="btn btn-outline-primary">
아웃라인 버튼 변형
<button class="btn btn-lg">
큰 버튼 (btn-sm도 있음)
<button class="btn btn-link">
링크처럼 스타일된 버튼
<button class="btn-close">
일반 닫기 (×) 버튼
<button class="btn disabled">
비활성 버튼 상태
<button class="btn active">
활성 버튼 상태
<div class="d-grid"><button class="btn">
d-grid로 전체 너비 블록 버튼
<div class="btn-group">
버튼 그룹화
폼
11<input class="form-control">
스타일된 텍스트 입력
<label class="form-label">
폼 필드 레이블
<select class="form-select">
스타일된 select 드롭다운
<div class="form-check">
체크박스/라디오 래퍼
<input class="form-check-input">
스타일된 체크박스 또는 라디오 입력
<div class="form-check form-switch">
토글 스위치 컴포넌트
<input class="form-control-lg">
큰 입력 (form-control-sm도 있음)
<div class="input-group">
애드온이 있는 입력 그룹
is-invalid
유효하지 않은 검증 상태 (is-valid)
<div class="form-floating">
플로팅 레이블 입력
col-form-label
가로 폼에 정렬된 레이블
컴포넌트
14<div class="card">
유연한 콘텐츠 카드
<nav class="navbar navbar-expand-lg">
반응형 내비게이션 바
data-bs-toggle="modal" data-bs-target="#m"
모달 대화상자 트리거
data-bs-toggle="dropdown"
드롭다운 메뉴 전환
data-bs-toggle="collapse"
접을 수 있는 요소 전환
<div class="accordion">
쌓인 접이식 패널
<div class="alert alert-dismissible">
닫을 수 있는 알림 메시지
<span class="badge text-bg-primary">
작은 개수 또는 레이블 배지
<ul class="list-group">
스타일된 항목 리스트
<ul class="nav nav-tabs">
탭 내비게이션
<div class="toast">
경량 토스트 알림
<div class="offcanvas">
오프캔버스 사이드바 패널
<div class="spinner-border">
로딩 스피너 표시기
<nav><ul class="pagination">
페이지 매김 내비게이션 링크
헬퍼 및 기타
11data-bs-theme="dark"
범위에 다크 색상 모드 활성화
<div class="ratio ratio-16x9">
반응형 종횡비 박스
visually-hidden
시각적으로 숨기되 스크린 리더용 유지
visually-hidden-focusable
포커스 전까지 숨김 (스킵 링크)
stretched-link
부모를 완전히 클릭 가능하게 만들기
clearfix
플로팅된 자식 클리어
<div class="vstack gap-2">
요소의 세로 스택
<div class="hstack gap-2">
요소의 가로 스택
<a class="icon-link">
인라인 아이콘과 정렬된 링크
<div class="progress">
진행 표시줄 컨테이너
<nav class="breadcrumb">
브레드크럼 내비게이션 경로
“:q”와 일치하는 항목이 없습니다.
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.