Bootstrap 플렉스 플레이그라운드

Bootstrap 플렉스 플레이그라운드 소개

Bootstrap 플렉스 놀이터는 원시 CSS 대신 실제 Bootstrap 5.3 유틸리티 클래스로 플렉스박스 레이아웃을 만들 수 있게 해줍니다. 방향, 줄바꿈, justify-content, align-items, gap 같은 컨테이너를 세그먼트 컨트롤로 설정하고, 항목을 클릭해 각각의 align-self, order, grow, shrink 유틸리티를 지정하면 실시간 미리보기가 즉시 재배치됩니다.

브레이크포인트 전환기가 이 도구를 단순한 장난감 이상으로 만듭니다: sm, md, lg, xl, xxl 중 하나를 선택하면 그 시점부터 설정한 클래스가 justify-content-md-between, flex-lg-row처럼 반응형 접미사를 얻습니다. 이는 Bootstrap의 모바일 우선 시스템이 해당 브레이크포인트 이상에 적용하는 방식과 정확히 같습니다. 실제 컴포넌트를 시뮬레이션하기 위해 최대 12개 항목을 추가할 수 있습니다.

레이아웃이 원하는 대로 나오면 생성된 HTML 전체 또는 컨테이너 클래스만 복사해 프로젝트에 바로 붙여넣으세요. 모든 작업은 브라우저에서 실행되며 아무것도 업로드되지 않습니다.

Bootstrap 플렉스 플레이그라운드 사용 방법

1. 세그먼트 컨트롤로 컨테이너 유틸리티 — 방향, 줄바꿈, justify-content, align-items, gap — 를 설정하세요.
2. 실제 컴포넌트에 맞게 항목을 추가하거나 제거하세요(2~12개).
3. 항목을 클릭해 자신만의 align-self, order 또는 flex 크기 유틸리티를 지정하세요.
4. 브레이크포인트를 전환해 sm, md, lg, xl, xxl 이상부터 적용되는 반응형 변형을 추가하세요.
5. 실시간 미리보기를 확인한 다음 생성된 HTML이나 컨테이너 클래스를 복사하세요.

자주 묻는 질문