[Bootstrap] Bootstrap 예제: 3. 유틸리티 클래스

Bootstrap 예제: 3. 유틸리티 클래스

Bootstrap 5는 CSS를 직접 작성하지 않고도 스타일을 빠르게 적용할 수 있는 수많은 유틸리티 클래스를 제공합니다. 이를 "Atomic CSS" 방식이라고도 합니다.

Spacing (간격)

m은 margin, p는 padding을 의미합니다.

• t(top), b(bottom), s(start, left), e(end, right), x(x-axis), y(y-axis)를 조합하여 방향을 지정합니다.
• 0~5까지의 숫자로 크기를 지정합니다.

<!-- 위쪽 마진 3, 좌우 패딩 4 -->
<div class="mt-3 px-4 border">Margin Top & Padding X</div>

<!-- 모든 방향 패딩 5 -->
<div class="p-5 border">Padding 5</div>

Colors (색상)

bg-*로 배경색을, text-*로 텍스트 색상을 지정합니다.

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-success-subtle text-success-emphasis">Success Subtle</div>

Flexbox (플렉스박스)

d-flex로 flex 컨테이너를 만들고, justify-content-*, align-items-* 등으로 정렬합니다.

<!-- Flex 컨테이너, 자식 요소들을 중앙 정렬, 수직 중앙 정렬 -->
<div class="d-flex justify-content-center align-items-center bg-dark-subtle" style="height: 100px;">
  <div>Flex Item 1</div>
  <div class="ms-3">Flex Item 2</div>
</div>

<!-- 자식 요소들을 양 끝으로 정렬 -->
<div class="d-flex justify-content-between bg-light-subtle mt-3">
  <div>Left</div>
  <div>Right</div>
</div>

종합 예제

유틸리티 클래스를 조합하여 하나의 컴포넌트를 만드는 예제입니다.

<div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
  <img class="me-3" src="/docs/5.3/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38">
  <div class="lh-1">
    <h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
    <small>Since 2011</small>
  </div>
</div>