레이아웃용 유틸리티
레이아웃용 유틸리티 (Utilities for layout)
좀 더 빠르고 모바일 친화적인 반응형 개발을 위해, 콘텐츠를 보이거나 숨기고, 정렬하고, 간격을 주는 수십 가지 유틸리티 클래스를 제공해요.
출처: 문서
본문
표시 변경 (Changing display)
display 유틸리티를 사용하면 display 속성의 일반적인 값을 반응형으로 전환할 수 있어요. 그리드 시스템이나 콘텐츠, 컴포넌트와 조합해서 특정 뷰포트에서 보이거나 숨기도록 할 수 있어요.
Flexbox 옵션 (Flexbox options)
Bootstrap은 flexbox 기반으로 만들어졌지만, 모든 요소의 display를 display: flex로 바꾸지는 않아요. 그렇게 하면 불필요한 오버라이드가 많아지고 브라우저의 핵심 동작을 예기치 않게 바꿀 수 있기 때문이에요. 대부분의 컴포넌트는 flexbox가 활성화된 상태로 만들어져 있어요.
요소에 display: flex를 추가해야 한다면 .d-flex나 반응형 변형(예: .d-sm-flex)을 사용하세요. 크기 조절, 정렬, 간격 등을 위한 flexbox 유틸리티를 사용하려면 이 클래스나 display 값이 필요해요.
마진과 패딩 (Margin and padding)
마진과 패딩 간격 유틸리티를 사용하면 요소와 컴포넌트의 간격과 크기를 제어할 수 있어요. Bootstrap은 $spacer 변수의 기본값 1rem을 기준으로 6단계 간격 스케일을 포함해요. 모든 뷰포트에 적용되는 값(예: LTR에서 margin-right: 1rem을 뜻하는 .me-3)을 고르거나, 특정 뷰포트만 겨냥한 반응형 변형(예: md 브레이크포인트부터 margin-right: 1rem을 뜻하는 .me-md-3)을 고를 수 있어요.
가시성 전환 (Toggle visibility)
display를 바꿀 필요가 없을 때는 가시성 유틸리티로 요소의 가시성을 전환할 수 있어요. 보이지 않는 요소도 페이지 레이아웃에는 여전히 영향을 주지만, 방문자에게는 시각적으로 숨겨져 있어요.