[basic] BS5 - Utilities (BS유틸클래스) ★★★★★

1. border (테두리 사용 여부)
2. Border Width (테두리 두께)
3. border color (테두리 색깔)
4. border radius (테두리 둥글기)
5. Float (한켠띄우기) / Clearfix (줄바꿈)
6. Responsive Float (반응형 한켠띄우기) 
7. Center Align (중앙정렬 = 가운데정렬)
8. Width (너비 비율)
9. Height (높이 비율)
10. Spacing (여백) ★ = [margin(마진) / padding (패딩)]
11. Shadows (그림자)
12. Vertical Align (수직 정렬)
13. Responsive Embeds (반응형 엠베드)
14. Visibility (보이기/숨기기)
15. Position (위치고정) - 상단고정/하단고정/스티키고정
16. Close icon (닫기 아이콘)
17. Screenreader (스크린리더)
18. Color (글자색) - (일반/링크/불투명도)글자색
19. Background Colors (배경색)
20. Typography/Text Classes (글자 관련 클래스) ★
21. Block Elements (블럭요소화)
22. Other Display Classes (그외 노출 관련 클래스) ★

border (테두리 사용 여부) 

 

<span class="border">4면 모두 사용</span>

<span class="border border-0">4면 모두 제거</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>

 

<span class="border-top">상단만 사용</span>

<span class="border-end">우측만 사용</span>

<span class="border-bottom">하단만 사용</span>

<span class="border-start">좌측만 사용</span>

 

결과보기 

Border Width (테두리 두께)

 

<span class="border border-1">border-width: 1px</span>

<span class="border border-2">border-width: 2px</span>

<span class="border border-3">border-width: 3px</span>

<span class="border border-4">border-width: 4px</span>

<span class="border border-5">border-width: 5px</span>

 

border color (테두리 색깔)

 

<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>

 

결과보기

border radius (테두리 둥글기)

 

<span class="rounded">4면 모두 0.25 rem</span>

<span class="rounded-top">상단만 0.25 rem</span>

<span class="rounded-end">우측만 0.25 rem</span>

<span class="rounded-bottom">하단만 0.25 rem</span>

<span class="rounded-start">좌측만 0.25 rem</span>

<span class="rounded-circle">50 %</span>

<span class="rounded-pill" style="width:150px">50 rem</span>

<span class="rounded-0">0</span>

<span class="rounded-1">0.2 rem</span>

<span class="rounded-2">0.25 rem</span>

<span class="rounded-3">0.3 rem</span>

 

결과보기

※ rounded-circle, rounded-pill 제외한 나머지는 별반 차이 없음. ㅡㅡ;

Float (한켠띄우기) / Clearfix (줄바꿈)

 

<div class="clearfix">

  <span class="float-start">Float left</span>

  <span class="float-end">Float right</span>

</div>

 

결과보기

Responsive Float (반응형 한켠띄우기) 

 

<div class="float-sm-end">sm 이상 시 오른쪽에 띄우기</div><br>

<div class="float-md-end">md 이상 시 오른쪽에 띄우기</div><br>

<div class="float-lg-end">lg 이상 시 오른쪽에 띄우기</div><br>

<div class="float-xl-end">xl 이상 시 오른쪽에 띄우기</div><br>

<div class="float-xxl-end">xxl 이상 시 오른쪽에 띄우기</div><br>

<div class="float-none">띄우기 사용 X (즉, 기본 위치에)</div>

 

결과보기

Center Align (중앙정렬 = 가운데정렬)

 

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

 

결과보기

---

PS. 

 

.mx-auto {

    margin-right: auto!important;

    margin-left: auto!important;

} 

 

Width (너비 비율)

 

<div class="w-25 bg-warning">width: 25%</div>

<div class="w-50 bg-warning">width: 50%</div>

<div class="w-75 bg-warning">width: 75%</div>

<div class="w-100 bg-warning">width: 100%</div>

<div class="w-auto bg-warning">width:auto</div>

<div class="mw-100 bg-warning">max-width: 100%</div>

<div class="vw-100 bg-warning">width: 100vw</div>

<div class="min-vw-100 bg-warning">min-width: 100vw</div>

 

결과보기

Height (높이 비율)

 

<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">height: auto</div>

  <div class="mh-100 bg-warning" style="height:500px">max-height: 100%</div>

<div class="vh-100 bg-warning">height: 100vh</div>

<div class="min-vh-100 bg-warning">min-height: 100vh</div>

</div>

 

결과보기

Spacing (여백) ★ = [margin(마진) / padding (패딩)]

[클래스 형식]

 

xs 경우:

• propertysides-size (예) mr-5, pr-5

 

sm, md, lg, xl, xxl 경우 :

• propertysides-breakpoint-size (예) mr-sm-5, pr-sm-5

 

---

[클래스 구성요소]

 

property

• m : margin
• p : padding

sides

• t : 상 (※ t: top 의미)
• b : 하 (※ b: bottom 의미)
• s : 좌 (※ s: start 의미)
• e : 우 (※ e: end 의미)
• x : 좌우
• y : 상하
• 없음 : 상하좌우

breakpoint

• xs : (화면너비 <=576px)
• sm : (화면너비 >=576px)
• md : (화면너비 >=768px)
• lg : (화면너비 >=992px)
• xl : (화면너비 >=1200px)
• xxl : (화면너비 >= 1400px)

size

• 0 : 0
• 1 : 0.25rem (※ 글자 크기 16px인 경우 4px) 즉, 글자 크기의 1/4배
• 2 : .5rem (※ 글자 크기가 16px 경우 8px) 즉, 글자 크기의 1/2배
• 3 : 1rem (※ 글자 크기가 16px 경우 16px) 즉, 글자 크기의 1배
• 4 : 1.5rem (글꼴 크기가 16 16인 경우 24px) 즉, 글자 크기의 1.5배
• 5 : 3rem (※ 글자 크기가 16px 경우 48px) 즉, 글자 크기의 3배
• auto : auto  (※ margin 경우에만 적용. padding엔 적용 X)

PS. BS5 경우, 역마진 (= 음수 마진) 관련 클래스 제거됨.

---

[클래스 예제]

 

<div class="pt-4 bg-warning">...</div>

<div class="p-5 bg-success">...</div>

<div class="m-5 pb-5 bg-info">...</div>

 

결과보기

---

[클래스 종류]

 

* : breakpoint : (xs, sm, md, lg, xl, xxl)

# : size : (양: 0~5, 음: n1~n5)  ※ margin 경우, auto도 가능.

 

(margin 경우) 

• .m-#  ・ .m-*-#  : 마진 상하좌우
• .mt-# ・ .mt-*-# : 마진 상
• .mb-# ・ .mb-*-# : 마진 하
• .ms-# ・ .ms-*-# : 마진 좌
• .me-# ・ .me-*-# : 마진 우
• .mx-# ・ .mx-*-# : 마진 좌우
• .my-# ・ .my-*-# : 마진 상하

 

(padding 경우)

• .p-#  ・ .p-*-#  : 패딩 상하좌우
• .pt-# ・ .pt-*-# : 패딩 상
• .pb-# ・ .pb-*-# : 패딩 하
• .ps-# ・ .ps-*-# : 패딩 좌
• .pe-# ・ .pe-*-# : 패딩 우
• .py-# ・ .py-*-# : 패딩 위아래
• .px-# ・ .px-*-# : 패딩 좌우

 

Shadows (그림자)

 

<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>

 

결과보기

Vertical Align (수직 정렬)

※ inline, inline-block, inline-table, table cell 요소에서만 작동

 

<span class="align-baseline">vertical-align: baseline</span>

<span class="align-top">vertical-align: top</span>

<span class="align-middle">vertical-align: middle</span>

<span class="align-bottom">vertical-align: bottom</span>

<span class="align-text-top">vertical-align: text-top</span>

<span class="align-text-bottom">vertical-align: text-bottom</span>

 

결과보기

Responsive Embeds (반응형 엠베드)

 

1:1 비율

<div class="ratio ratio-1x1">

    <iframe src="주소"></iframe>

</div>

4:3 비율

<div class="ratio ratio-4x3">

    <iframe src="주소"></iframe>

</div>

16:9 비율

<div class="ratio ratio-16x9">

    <iframe src="주소"></iframe>

</div>

21:9 비율

<div class="ratio ratio-21x9">

    <iframe src="주소"></iframe>

</div>

결과보기

Visibility (보이기/숨기기)

 

<div class="visible">보이기 (visibility: visible)</div>

<div class="invisible">숨기기 (visibility:hidden)</div>

 

PS. 요소의 display 값엔 영향 안 미침.

Position (위치고정) - 상단고정/하단고정/스티키고정

[상단 고정]

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

  ...

</nav>

 

결과보기

---

[하단 고정]

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">

  ...

</nav>

 

결과보기

---

[스티키 고정]

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">

  ...

</nav>

 

결과보기

Close icon (닫기 아이콘)

 

<button type="button" class="btn-close"></button>

 

Screenreader (스크린리더)

※ 스크린리더 제외한 모든 기기에서 해당 요소를 숨김.

 

<span class="visually-hidden">스크린리더 전용</span>

 

※ BS4 경우, .sr-only 클래스 사용. 

Color (글자색) - (일반/링크/불투명도)글자색

[일반 글자색]

 

<p class="text-muted">안중요 (연회색)</p>

<p class="text-primary">중요 (진한 하늘색)</p>

<p class="text-success">성공 (녹색)</p>

<p class="text-info">정보 (연청록색)</p>

<p class="text-warning">경고 (오렌지색)</p>

<p class="text-danger">위험 (진한 빨강색)</p>

<p class="text-secondary">부수 (회색)</p>

<p class="text-dark">진회색 (진회색)</p>

<p class="text-body">기본색 (보통, 검정색)</p>

<p class="text-light">연회색 (흰색배경일 때)</p>

<p class="text-white">흰색 (흰색배경일 때)</p>

 

결과보기

---

[링크 글자색]

 

<a> 링크 태그에 사용 경우, 마우스 hover 시 기본 색보다 좀 더 진한색으로 변함.

 

결과보기

---

[불투명도 글자색]

 

<p class="text-black-50">...</p>

<p class="text-white-50 bg-dark">...</p>

 

결과보기

Background Colors (배경색)

 

<p class="bg-primary text-white">중요 (파랑)</p>

<p class="bg-success text-white">성공 (녹색)</p>

<p class="bg-info text-white">정보 (청록)</p>

<p class="bg-warning text-white">경고 (오렌지)</p>

<p class="bg-danger text-white">위험 (진빨강)</p>

<p class="bg-secondary text-white">부수 (회색)</p>

<p class="bg-dark text-white">진회색 배경</p>

<p class="bg-light text-dark">연회색 배경</p>

 

결과보기

Typography/Text Classes (글자 관련 클래스) ★

돋보이는 머리글. (※ 숫자가 작을수록 큼.)

 

<h1 class="display-1">Display 1</h1>

<h1 class="display-2">Display 2</h1>

<h1 class="display-3">Display 3</h1>

<h1 class="display-4">Display 4</h1>

<h1 class="display-5">Display 4</h1>

<h1 class="display-6">Display 4</h1>

 

결과보기

---

[문단 글씨 크기]

 

<p class="lead">문단 글씨 더 크게</p>

<p class="small">문단 글씨 더 작게</p>

 

결과보기

---

[긴 한 단어가 레이아웃 깨는 거 방지]

 

<p class="text-break">...</p>

 

---

[텍스트 정렬]

 

<p class="text-start">텍스트 왼쪽 정렬</p>

<p class="text-end">텍스트 오른쪽 정렬</p>      

<p class="text-center">텍스트 가운데 정렬</p>

<p class="text-nowrap">텍스트 줄바꿈 방지</p>

 

결과보기

---

[링크 밑줄 제거]

 

<a href="#" class="text-decoration-none">밑줄 제거</a>

<a href="#" class="text-decoration-underline">밑줄</a>

<a href="#" class="text-decoration-line-through">취소선</a>

 

결과보기

---

[텍스트 대소문자 처리]

 

<p class="text-lowercase">소문자화</p>

<p class="text-uppercase">대문자화</p>      

<p class="text-capitalize">각 첫글자만 대문자</p>

 

결과보기

---

[텍스트 글자색 초기화 = 부모요소 글자색 상속]

 

<p class="text-primary"><a href="#" class="text-reset">reset link</a></p>

 

결과보기

---

[두문자어 글자 크기 작게]

 

<p><abbr title="World Health Organization">WHO</abbr> (보통 크기)</p>      

<p><abbr title="World Health Organization" class="initialism">WHO</abbr> (좀 더 작은 크기)</p>

 

결과보기

---

[자식요소 리스트의 list-style 초기화 및 왼쪽 마진 제거]

※ 자손요소 이하엔 적용 X

 

<ul class="list-unstyled">

    <li>HTML</li>

    <li>BS

        <ul>

        <li>BS3</li>

        <li>BS4</li>

        </ul>

    </li>

    <li>CSS</li>

</ul>

 

결과보기

---

[리스트 가로 정렬]

 

<ul class="list-inline">

    <li class="list-inline-item">HTML</li>

    <li class="list-inline-item">CSS</li>

    <li class="list-inline-item">JS</li>

</ul>

 

결과보기

Block Elements (블럭요소화)

[요소 보이기] ※ 다른 기기 ★★★★★

 

<span class="d-block bg-success">d-block</span>

<span class="d-sm-block bg-success">d-sm-block</span>

<span class="d-md-block bg-success">d-md-block</span>

<span class="d-lg-block bg-success">d-lg-block</span>

<span class="d-xl-block bg-success">d-xl-block</span>

<span class="d-xxl-block bg-success">d-xl-block</span>

 

결과보기

Other Display Classes (그외 노출 관련 클래스) ★

[요소 숨기기] ※ 다른 요소.

 

<div class="d-none">Hidden DIV</div>

<p class="d-none">Hidden P</p>

 

결과보기

---

[요소 숨기기]  ※ 다른 기기. ★★★★★

 

<div class="d-none bg-success">Hidden DIV</div>

<div class="d-sm-none bg-success">d-sm-none</div>

<div class="d-md-none bg-success">d-md-none</div>

<div class="d-lg-none bg-success">d-lg-none</div>

<div class="d-xl-none bg-success">d-xl-none</div>

<div class="d-xxl-none bg-success">d-xxl-none</div>

 

결과보기

---

[인라인 요소화] ※ 다른 요소.

 

<div class="d-inline">Inline DIV.</div>

<p class="d-inline">Inline P.</p>

 

결과보기

---

[인라인 요소화] ※ 다른 기기.

 

<div class="d-inline bg-success">Inline DIV</div>

<div class="d-sm-inline bg-success">d-sm-inline</div>

<div class="d-md-inline bg-success">d-md-inline</div>

<div class="d-lg-inline bg-success">d-lg-inline</div>

<div class="d-xl-inline bg-success">d-xl-inline</div>

<div class="d-xxl-inline bg-success">d-xl-inline</div>

 

결과보기

---

[인라인블럭요소화] ※ 다른 요소

 

<div class="d-inline-block">Inline block DIV.</div>

<p class="d-inline-block">Inline block p.</p>

 

결과보기

---

[인라인블럭요소화] ※ 다른 기기

 

<div class="d-inline-block bg-success">Inline block DIV</div>

<div class="d-sm-inline-block bg-success">d-sm-inline-block</div>

<div class="d-md-inline-block bg-success">d-md-inline-block</div>

<div class="d-lg-inline-block bg-success">d-lg-inline-block</div>

<div class="d-inline-block bg-success">d-xl-inline-block</div>

 

결과보기

---

[테이블요소화] 모든 기기

 

<div class="d-table" style="width:100%">

    <div class="d-table-row" style="width:100%">

        <div class="d-table-cell">

        <h4>Left Cell</h4>

        <p>...</p>

        </div>

        <div class="d-table-cell">

        <h4>Middle Cell</h4>

        <p>...</p>

    </div>

        <div class="d-table-cell">

        <h4>Right Cell</h4>

        <p>...</p>

        </div>

    </div>

</div> 

 

결과보기

---

[테이블요소화] 다른 기기

 

<div class="d-md-table bg-success" style="width:100%">

    <div class="d-md-table-row" style="width:100%">

        <div class="d-md-table-cell">

        <h4>Left Cell</h4>

        <p>...</p>

        </div>

        <div class="d-md-table-cell">

        <h4>Middle Cell</h4>

        <p>...</p>

        </div>

        <div class="d-md-table-cell">

        <h4>Right Cell</h4>

        <p>...</p>

        </div>

  </div>

</div>

 

결과보기

---

[플렉스박스화] ※ 블럭형 플렉스박스 생성 후, 자식 요소를 플렉스 아이템으로 만듦.

 

<div class="d-flex p-3 bg-secondary text-white">  

    <div class="p-2 bg-info">Flex item 1</div>

    <div class="p-2 bg-warning">Flex item 2</div>

    <div class="p-2 bg-primary">Flex item 3</div>

</div>

 

결과보기

---

[플렉스박스] ※ 다른 기기

 

<div class="d-flex bg-success">d-flex</div>

<span class="d-sm-flex bg-success">d-sm-flex</span>

<span class="d-md-flex bg-success">d-md-flex</span>

<span class="d-lg-flex bg-success">d-lg-flex</span>

<span class="d-xl-flex bg-success">d-xl-flex</span>

<span class="d-xxl-flex bg-success">d-xl-flex</span>

 

결과보기

---

[인라인 플렉스박스] ※ 인라인형 플렉스박스 생성 후, 자식요소를 플렉스 아이템으로 만듦.

 

<div class="d-inline-flex p-3 bg-secondary text-white">  

    <div class="p-2 bg-info">Flex item 1</div>

    <div class="p-2 bg-warning">Flex item 2</div>

    <div class="p-2 bg-primary">Flex item 3</div>

</div>

 

결과보기

---

[인라인 플렉스박스] ※ 다른 기기

 

<div class="d-inline-flex bg-success">d-flex</div>

<div class="d-sm-inline-flex bg-success">d-sm-flex</div>

<div class="d-md-inline-flex bg-success">d-md-flex</div>

<div class="d-lg-inline-flex bg-success">d-lg-flex</div>

<div class="d-xl-inline-flex bg-success">d-xl-flex</div>

<div class="d-xxl-inline-flex bg-success">d-xl-flex</div>

 

결과보기