기타/Bootstrap

[Bootstrap] Utilities

glorypang 2025. 3. 25. 17:38
728x90
반응형
SMALL

1. 테두리(Border)

1.1 테두리 추가/제거

  • `.border`, `.border-0`, `.border-top`, `.border-start-0` 등
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>

<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

 

 

1.2 테두리 굵기

  • `.border-1` ~ `.border-5`
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

 

1.3 테두리 색상

  • `.border-primary`, `.border-success` 등
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

 

 

 

1.4 테두리 둥글기(모서리)

  • `.rounded`, `.rounded-circle`, `.rounded-pill`, `.rounded-0` ~ `.rounded-5`
     
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>

2. 정렬과 플로팅

2.1 좌/우 플로트

  • `.float-start`, `.float-end`
  • 플로트 해제: `.clearfix`
<div class="clearfix">
  <span class="float-start">Float left</span>
  <span class="float-end">Float right</span>
</div>

 

2.2 반응형 플로트

  • `.float-md-start`, `.float-lg-end` 등
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>

 

2.3 가운데 정렬

  • `.mx-auto`
<div class="mx-auto bg-warning" style="width:150px">Centered</div>

3. 너비와 높이

  • 너비 설정: `.w-25`, `.w-50`, `.w-75`, `.w-100`, `.w-auto`, `.mw-100`
  • 높이 설정: `.h-25`, `.h-50`, `.h-75`, `.h-100`, `.h-auto`, `.mh-100`
<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Height 25%</div>
  <div class="h-50 bg-warning">Height 50%</div>
  <div class="h-75 bg-warning">Height 75%</div>
  <div class="h-100 bg-warning">Height 100%</div>
  <div class="h-auto bg-warning">Auto Height</div>
  <div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>

4. 여백(Margin) & 패딩(Padding)

  • 기본 구조: `{속성}{방향}-{크기}`
  • 속성: `m` (margin), `p` (padding)
  • 방향: `t`(top), `b`(bottom), `s`(start), `e`(end), `x`(양옆), `y`(상하), 없음(전체)
  • 크기: `0 ~ 5`, `auto`
.pt-4    → 위쪽 패딩 1.5rem  
.mx-auto → 좌우 마진 자동 (가운데 정렬)  
.p-5     → 전체 패딩 3rem

<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>

5. 그림자 효과 (Shadow)

  • `.shadow-none` / `.shadow-sm` / `.shadow` / `.shadow-lg`
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>

 

6. 수직 정렬 (Inline 요소만 가능)

  • `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-top`, `.align-text-bottom`
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

7. 비율 유지 (Aspect Ratio)

  • 반응형 콘텐츠에 적용 (예: iframe, video 등)
  • `.ratio ratio-16x9`, `.ratio-4x3`, `.ratio-1x1`, `.ratio-21x9`
<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

8. Visibility (가시성)

  • `.visible`: 보이게
  • `.invisible`: 안 보이게 (단, 공간은 유지됨)
  • `.visually-hidden`: 화면에 안 보이지만 스크린리더에서는 읽힘
<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>

9. 닫기 버튼

  • `.btn-close`: 알림이나 모달에서 닫기 버튼 디자인 적용
<button type="button" class="btn-close"></button>

10. 텍스트 색상

클래스  의미
`.text-primary`, `.text-success`, `.text-danger`, `.text-info` 등 색상 적용
`.text-muted` 흐리게
`.text-white`, `.text-dark`, `.text-body`, `.text-light` 텍스트 대비용
`.text-black-50`, `.text-white-50` 반투명 색상 적용 (50% 불투명도)

11. 배경색

  • `.bg-primary`, `.bg-danger`, `.bg-light`, `.bg-dark` 등
  • 자동으로 글자 색상까지 맞춰주는 클래스: `.text-bg-primary`, `.text-bg-danger` 등
728x90
반응형
LIST