Bootstrap 그리드 플레이그라운드
반응형 Bootstrap 5.3 그리드 레이아웃을 시각적으로 구성하고 정확한 클래스 —— row, col, 오프셋, 순서, 거터, 정렬 —— 을 복사하세요.
미리보기
편집하려면 열을 클릭하세요
생성된 HTML
—
모든 처리는 브라우저에서 실행되며 —— 아무것도 업로드되지 않습니다.
설정한 클래스는 이 브레이크포인트 이상에서 적용됩니다. 브레이크포인트를 전환하여 반응형 레이아웃을 구성하세요.
행 .row
열
0
선택한 열
Bootstrap 그리드 플레이그라운드 소개
Bootstrap 그리드 놀이터는 실제 Bootstrap 5.3 그리드 시스템으로 반응형 행-열 레이아웃을 만듭니다. 행에 최대 12개의 열을 추가하고, 열을 클릭해 너비, 오프셋, 순서를 설정하고, 행의 거터와 정렬을 조정하세요 — 미리보기와 생성된 마크업이 모든 변경마다 실시간으로 업데이트됩니다.
Bootstrap 그리드는 모바일 우선이므로 브레이크포인트 전환기가 핵심입니다: 기본에서 열을 col-6로 설정하고 md에서 col-md-4로 설정하면, 코드를 한 줄도 쓰지 않고 모바일에서는 쌓이고 데스크톱에서는 세 개가 나란히 배치되는 전형적인 패턴을 만들 수 있습니다. 오프셋, 순서, 거터 클래스는 모두 동일한 반응형 접미사를 사용합니다.
출력물은 깔끔하게 복사-붙여넣기 할 수 있는 HTML입니다 — 설정한 클래스를 정확히 담은 열 자식들이 있는 행 div입니다. 전체 스니펫이나 행 클래스만 복사하세요. 모든 작업은 브라우저에서 로컬로 실행됩니다.
Bootstrap 그리드 플레이그라운드 사용 방법
- 행에 열을 추가하고(최대 12개) 하나를 클릭해 선택하세요.
- 현재 브레이크포인트에서 선택한 열의 스팬, 오프셋, 순서를 설정하세요.
- 브레이크포인트(sm에서 xxl까지)를 전환해 더 큰 화면에서 레이아웃이 어떻게 재배치되는지 정의하세요.
- 행의 거터와 정렬 유틸리티를 조정하세요.
- 실시간 미리보기를 검토한 다음 생성된 HTML이나 행 클래스를 복사하세요.
자주 묻는 질문
Bootstrap의 그리드는 너비가 12 단위입니다. 합계 스팬이 12를 넘는 열은 같은 행 안에서 새 줄로 넘어갑니다 — 이는 예상된 동작이며 종종 여러 줄 그리드를 만들기 위해 의도적으로 사용됩니다.
열에 전체 너비 기본값(col-12)과 브레이크포인트에서 더 좁은 스팬, 예를 들어 col-md-4를 부여하세요. 768px 미만에서는 열이 쌓이고, md 이상부터는 세 개가 나란히 정렬됩니다. 브레이크포인트 전환기가 정확히 이 작업을 만들어 줍니다.
오프셋은 열을 그리드 단위 수만큼 오른쪽으로 밀어냅니다(offset-md-2는 2칸을 건너뜁니다). 빈 채우기용 열을 삽입하지 않고도 단독 열을 가운데 정렬하거나 의도적인 여백을 만들 때 오프셋을 사용하세요.
네 — 행의 거터 유틸리티가 열 사이의 수평, 수직 간격을 제어합니다. 놀이터는 행 정렬 옵션과 함께 이를 노출하며, 다른 그리드 클래스와 마찬가지로 반응형 접미사를 사용할 수 있습니다.
네, 완전히 무료입니다. 빌더는 브라우저에서만 실행되므로 여러분의 레이아웃은 서버로 업로드되거나 저장되지 않습니다.
인기 검색어
Bootstrap 그리드 플레이그라운드
Bootstrap 그리드 생성기
Bootstrap 5 그리드 시스템
row col 클래스 생성기
Bootstrap 열 오프셋 도구
반응형 Bootstrap 그리드 빌더
Bootstrap 거터 정렬 생성기
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.