Bootstrap 5

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

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1,422
목차
  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>

 

결과보기


Bootstrap 5 관련글

Bootstrap 3 관련글

Bootstrap 4 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

JavaScript 관련글

jQuery 관련글

PHP 관련글

SQL 관련글
분류 제목
basic BS5 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭
basic BS5 - Navbar (메뉴바) - 네비게이션 메뉴바 (= 네브바 = 네비바) ※ BS5분기점
basic BS5 - Carousel (BS캐러셀) ※ Slideshow (슬라이드쇼)
basic BS5 - Modal (BS모달)
basic BS5 - Tooltip (BS툴팁 = BS말풍선 허버형)
basic BS5 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS5 - Toast (BS토스트) - 순간말풍선 (= 팝업상자 = 짧은경고창 = 스낵바)
basic BS5 - Scrollspy (BS스크롤스파이) - 원페이지메뉴링크 (= 내부링크)
basic BS5 - Offcanvas (오프캔버스) - 숨겨진 사이드바 메뉴
basic BS5 - Utilities (BS유틸클래스) ★★★★★
basic BS5 - Flex (BS플렉스박스) ★★★★★
form BS5 - Form (BS폼양식)
form BS5 - Select Menu (실렉트메뉴) / Datalist (데이터리스트)
form BS5 - Checkbox (체크박스) / Radio button (라디오버튼) / Toggle Switch…
form BS5 - Range (레인지: 범위지정)
form BS5 - Input Group (BS입력그룹 = BS인풋그룹)
form BS5 - Form Floating Labels (폼 플로팅 라벨) ※ placeholder (플레이스홀더)
form BS5 - Form Validation (폼유효성검사)
grid BS5 - Grid (BS그리드) - 반응형 레이아웃 ★★★
grid BS5 - Grid Stacked-to-horizontal (BS그리드 수직정렬 → 수평정렬)
2/4
목록
　홈　 PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱닷컴 PC버전 로그인