Bootstrap 치트시트
검색하고 인쇄할 수 있는 Bootstrap 5.3 참조 자료——그리드, 간격, 타이포그래피, 색상, 플렉스 유틸리티, 버튼, 폼, 컴포넌트. 무료.
Grid & layout
12<div class="container">
Fixed-width responsive container
<div class="container-fluid">
Full-width container at every breakpoint
<div class="container-md">
100% wide until the md breakpoint
<div class="row">
Grid row, holds columns
<div class="col">
Equal-width auto column
<div class="col-6">
Spans 6 of 12 columns
<div class="col-md-4">
4 columns from the md breakpoint up
<div class="col-auto">
Column sized to its content
<div class="offset-md-2">
Push column 2 columns to the right
<div class="row g-3">
Gutter spacing between columns
<div class="row row-cols-3">
Force 3 equal columns per row
<div class="order-2">
Reorder a flex/grid column
Spacing utilities
12m-3
Margin on all sides (scale 0-5)
mt-2
Margin top
mx-auto
Auto horizontal margins to center
p-4
Padding on all sides
py-2
Vertical padding (top and bottom)
ms-3
Margin start (left in LTR, RTL-aware)
me-3
Margin end (right in LTR, RTL-aware)
ps-2
Padding start, RTL-aware
pe-2
Padding end, RTL-aware
gap-3
Gap between flex/grid items
m-n1
Negative margin
p-md-5
Responsive padding from md up
Typography
14<h1>..<h6>
Heading levels with default styling
<p class="display-1">
Large display heading (display-1..6)
<p class="lead">
Stand-out lead paragraph
fw-bold
Bold font weight
fw-semibold
Semibold font weight
fst-italic
Italic font style
text-center
Center-align text
text-start
Start-align text, RTL-aware
text-end
End-align text, RTL-aware
text-truncate
Truncate overflow with ellipsis
text-uppercase
Transform text to uppercase
fs-1
Responsive font size (fs-1..6)
lh-base
Base line height (lh-1, lh-sm, lh-lg)
font-monospace
Monospace font family
Colors & background
10text-primary
Primary text color
bg-primary
Primary background color
bg-primary-subtle
Subtle primary background tint
text-primary-emphasis
Emphasis primary text, theme-aware
text-bg-primary
Primary bg with auto-contrast text
link-primary
Colored link helper
bg-opacity-50
Apply 50% background opacity
text-body-secondary
Muted secondary body text
text-body-emphasis
High-emphasis body text
border-primary-subtle
Subtle primary border color
Flex utilities
10d-flex
Create a flex container
flex-row
Lay items in a row
flex-column
Lay items in a column
justify-content-between
Space items along the main axis
align-items-center
Center items on the cross axis
flex-wrap
Allow items to wrap
flex-grow-1
Let an item grow to fill space
flex-fill
Force equal flexible widths
align-self-end
Align a single item to the end
flex-md-row
Responsive flex direction from md
Display & position
12d-none
Hide the element
d-md-block
Show as block from the md breakpoint
position-relative
Relative positioning
position-absolute
Absolute positioning
position-fixed
Fixed positioning
position-sticky
Sticky positioning
top-0 start-0
Pin to top-left, RTL-aware
translate-middle
Center via transform translate
fixed-top
Fix element to top of viewport
sticky-top
Stick to top on scroll
z-3
Set z-index (z-0..3)
invisible
Hide but keep layout space
Sizing & borders
12w-100
Width 100% of parent
w-50
Width 50% of parent
h-100
Height 100% of parent
mw-100
Max-width 100%
vh-100
Height 100% of the viewport
border
Add a default border on all sides
border-0
Remove all borders
border-primary
Color the border
rounded
Default border-radius
rounded-pill
Fully rounded pill shape
rounded-circle
Circular border-radius
shadow-sm
Small box shadow (shadow, shadow-lg)
Buttons
9<button class="btn btn-primary">
Solid primary button
<button class="btn btn-outline-primary">
Outline button variant
<button class="btn btn-lg">
Large button (also btn-sm)
<button class="btn btn-link">
Button styled like a link
<button class="btn-close">
Generic close (×) button
<button class="btn disabled">
Disabled button state
<button class="btn active">
Active button state
<div class="d-grid"><button class="btn">
Full-width block button via d-grid
<div class="btn-group">
Group buttons together
Forms
11<input class="form-control">
Styled text input
<label class="form-label">
Form field label
<select class="form-select">
Styled select dropdown
<div class="form-check">
Checkbox/radio wrapper
<input class="form-check-input">
Styled checkbox or radio input
<div class="form-check form-switch">
Toggle switch component
<input class="form-control-lg">
Large input (also form-control-sm)
<div class="input-group">
Group inputs with add-ons
is-invalid
Invalid validation state (is-valid)
<div class="form-floating">
Floating label input
col-form-label
Label aligned for horizontal forms
Components
14<div class="card">
Flexible content card
<nav class="navbar navbar-expand-lg">
Responsive navigation bar
data-bs-toggle="modal" data-bs-target="#m"
Trigger a modal dialog
data-bs-toggle="dropdown"
Toggle a dropdown menu
data-bs-toggle="collapse"
Toggle a collapsible element
<div class="accordion">
Stacked collapsible panels
<div class="alert alert-dismissible">
Dismissible alert message
<span class="badge text-bg-primary">
Small count or label badge
<ul class="list-group">
Styled list of items
<ul class="nav nav-tabs">
Tabbed navigation
<div class="toast">
Lightweight toast notification
<div class="offcanvas">
Off-canvas sidebar panel
<div class="spinner-border">
Loading spinner indicator
<nav><ul class="pagination">
Paginated navigation links
Helpers & misc
11data-bs-theme="dark"
Enable dark color mode on a scope
<div class="ratio ratio-16x9">
Responsive aspect-ratio box
visually-hidden
Hide visually, keep for screen readers
visually-hidden-focusable
Hidden until focused (skip links)
stretched-link
Make a parent fully clickable
clearfix
Clear floated children
<div class="vstack gap-2">
Vertical stack of elements
<div class="hstack gap-2">
Horizontal stack of elements
<a class="icon-link">
Link aligned with an inline icon
<div class="progress">
Progress bar container
<nav class="breadcrumb">
Breadcrumb navigation trail
“:q”와 일치하는 항목이 없습니다.
Bootstrap 치트시트 소개
이 Bootstrap 치트시트는 Bootstrap 5.3을 기준으로 매일 입력하는 클래스 이름들을 모아둔 자료입니다: 그리드와 레이아웃, 간격 유틸리티, 타이포그래피, 색상과 배경, 플렉스 유틸리티, 디스플레이와 포지션, 크기와 테두리, 버튼, 폼, 컴포넌트, 헬퍼까지 포함합니다.
Bootstrap 생산성은 대부분 어휘력에 달려 있습니다: 어떤 클래스가 존재하는지, 브레이크포인트별 형태가 어떻게 생겼는지 아는 것이죠. 각 행에는 클래스나 마크업 스니펫과 한 줄 설명이 함께 표시되어, “그 유틸리티 이름이 뭐였지?”에 대한 답을 문서를 뒤지지 않고 검색 한 번으로 찾을 수 있습니다.
이 시트는 무료이며 클라이언트 사이드에서 동작합니다. 검색창으로 클래스를 실시간 필터링하고, 고정된 목차로 섹션 간 이동하고, 클릭 한 번으로 스니펫을 복사하고, 레이아웃 작업 중 참고용으로 페이지를 인쇄할 수 있습니다.
Bootstrap 치트시트 사용 방법
- 그리드 및 레이아웃과 간격 유틸리티부터 컴포넌트와 헬퍼 및 기타까지 섹션을 훑어봅니다.
- gap, rounded, d-flex 같은 유틸리티를 검색해 시트를 즉시 필터링합니다.
- 고정 사이드바를 통해 플렉스 유틸리티나 폼 같은 섹션으로 이동합니다.
- 클래스나 스니펫, 또는 복사 아이콘을 클릭해 마크업에 복사합니다.
- 에디터 옆에 두고 볼 클래스 이름 참고용으로 시트를 인쇄합니다.
자주 묻는 질문
Bootstrap 5.3입니다. 표시된 유틸리티와 컴포넌트 클래스는 현재 5.3의 명명 규칙을 그대로 따르며, 최신 Bootstrap 프로젝트에서 쓰이는 간격, 플렉스, 색상 규칙도 포함합니다.
총 11개 섹션입니다: 그리드와 레이아웃, 간격 유틸리티, 타이포그래피, 색상과 배경, 플렉스 유틸리티, 디스플레이와 포지션, 크기와 테두리, 버튼, 폼, 컴포넌트, 헬퍼입니다.
네. 간격 섹션에서는 마진과 패딩 클래스 패턴 — 속성, 방향, 브레이크포인트, 크기 스케일 — 을 정리해 두었으며, 이는 Bootstrap에서 가장 많이 쓰이는 부분입니다.
네. 스니펫이나 복사 아이콘을 클릭하면 클래스가 클립보드에 복사되어 바로 HTML에 붙여넣을 수 있습니다.
네, 완전 무료입니다: 클라이언트 사이드에서 동작하며 검색과 인쇄가 가능하고 로그인도 필요 없습니다.
인기 검색어
bootstrap cheat sheet
bootstrap 5 classes list
bootstrap grid classes
bootstrap spacing utilities
bootstrap flex utilities
bootstrap button classes
bootstrap form classes
bootstrap 5 reference
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.