목차
border (테두리 사용 여부) border color (테두리 색깔) border radius (테두리 모서리 둥근 정도) Float (한켠띄우기) / Clearfix (줄바꿈) Responsive Float (반응형 한켠띄우기) Center Align (중앙정렬 = 가운데정렬) Width (너비 비율) Height (높이 비율) Spacing (여백) ★ = [margin(마진) / padding (패딩)] Shadows (그림자) Vertical Align (수직 정렬) Responsive Embeds (반응형 엠베드) Visibility (보이기/숨기기) Position (위치고정) - 상단고정/하단고정/스티키고정 Close icon (닫기 아이콘) Screenreader (스크린리더) Color (글자색) - (일반/링크/불투명도)글자색 Background Colors (배경색) Typography/Text Classes (글자 관련 클래스) ★ Block Elements (블럭요소화) Other Display Classes (그외 노출 관련 클래스) ★
border (테두리 사용 여부)
<span class="border "></span>
<span class="border border-0 "></span>
<span class="border border-top-0 "></span>
<span class="border border-right-0 "></span>
<span class="border border-bottom-0 "></span>
<span class="border border-left-0 "></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-sm "></span>
<span class="rounded "></span>
<span class="rounded-lg "></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle "></span>
<span class="rounded-0"></span>
결과보기
※ rounded-circle 제외한 나머지는 별반 차이 없음. ㅡㅡ;
Float (한켠띄우기) / Clearfix (줄바꿈)
<div class="clearfix ">
<span class="float-left ">Float left</span>
<span class="float-right ">Float right</span>
</div>
결과보기
Responsive Float (반응형 한켠띄우기)
<div class="float-sm-right ">sm 이상 시 오른쪽에 띄우기</div><br>
<div class="float-md-right ">md 이상 시 오른쪽에 띄우기</div><br>
<div class="float-lg-right ">lg 이상 시 오른쪽에 띄우기</div><br>
<div class="float-xl-right ">xl 이상 시 오른쪽에 띄우기</div><br>
<div class="float-none ">띄우기 사용 X</div>
결과보기
Center Align (중앙정렬 = 가운데정렬)
<div class="mx-auto bg-warning" style="width:150px">...</div>
결과보기
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="mw-100 bg-warning">Max Width 100%</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="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>
결과보기
Spacing (여백) ★ = [margin(마진) / padding (패딩)]
[클래스 형식]
xs 경우: propertysides -size
(예) mr -5, pr -5
sm, md, lg, xl 경우 : propertysides -breakpoint-size
(예) mr -sm-5, pr -sm-5
[클래스 구성요소]
property
m : margin
p : padding
sides
t : 상
b : 하
l : 좌
r : 우
x : 좌우
y : 상하
blank : 상하좌우
breakpoint
xs : (화면너비 <=576px)
sm : (화면너비 >=576px)
md : (화면너비 >=768px)
lg : (화면너비 >=992px)
xl : (화면너비 >=1200px)
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.
역마진 (= 음수 마진) : margin의 size값 앞에 "n" 추가.
n1 : -.25rem (※ 글자 크기 16px인 경우 -4px) 즉, 글자 크기의 1/4 역마진.
n2 : -.5rem (※ 글자 크기 16px인 경우 -8px) 즉, 글자 크기의 1/2 역마진.
n3 : -1rem (※ 글자 크기 16px인 경우 -16px) 즉, 글자 크기의 1배 역마진.
n4 : -1.5rem (※ 글자 크기 16px인 경우 -24px) 즉, 글자 크기의 1.5배 역마진.
n5 : -3rem (※ 글자 크기 16px인 경우 -48px) 즉, 글자 크기의 3배 역마진.
[클래스 예제]
<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)
# : size : (양: 0~5, 음: n1~n5) ※ margin 경우, auto도 가능.
(margin 경우)
.m-# ・ .m-*-# : 마진 상하좌우
.mt-# ・ .mt-*-# : 마진 상
.mb-# ・ .mb-*-# : 마진 하
.ml-# ・ .ml-*-# : 마진 좌
.mr-# ・ .mr-*-# : 마진 우
.mx-# ・ .mx-*-# : 마진 좌우
.my-# ・ .my-*-# : 마진 상하
(padding 경우)
.p-# ・ .p-*-# : 패딩 상하좌우
.pt-# ・ .pt-*-# : 패딩 상
.pb-# ・ .pb-*-# : 패딩 하
.pl-# ・ .pl-*-# : 패딩 좌
.pr-# ・ .pr-*-# : 패딩 우
.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 (수직 정렬)
<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>
결과보기
Responsive Embeds (반응형 엠베드)
21:9 비율
<div class="embed-responsive embed-responsive-21by9 ">
<iframe class="embed-responsive-item " src="..."></iframe>
</div>
16:9 비율
<div class="embed-responsive embed-responsive-16by9 ">
<iframe class="embed-responsive-item " src="..."></iframe>
</div>
4:3 비율
<div class="embed-responsive embed-responsive-4by3 ">
<iframe class="embed-responsive-item " src="..."></iframe>
</div>
1:1 비율
<div class="embed-responsive embed-responsive-1by1 ">
<iframe class="embed-responsive-item " src="..."></iframe>
</div>
결과보기
Visibility (보이기/숨기기)
<div class="visible ">보이기</div>
<div class="invisible ">안 보이기</div>
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="close ">× </button>
Screenreader (스크린리더)
<span class="sr-only ">스크린리더 전용</span>
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>
결과보기
[글자 굵기・이탤릭체]
<p class="font-weight-bold ">Bold text.</p>
<p class="font-weight-bolder ">Bolder text.</p>
<p class="font-weight-normal ">Normal weight text.</p>
<p class="font-weight-light ">Light weight text.</p>
<p class="font-weight-lighter ">Lighter weight text.</p>
<p class="font-italic ">Italic text.</p>
결과보기
[문단 글씨 크기]
<p class="lead ">문단 글씨 더 크게</p>
<p class="small ">문단 글씨 더 작게</p>
결과보기
[긴 한 단어가 레이아웃 깨는 거 방지]
<p class="text-break ">...</p>
[텍스트 정렬]
<p class="text-left ">텍스트 왼쪽 정렬</p>
<p class="text-right ">텍스트 오른쪽 정렬</p>
<p class="text-center ">텍스트 가운데 정렬</p>
<p class="text-justify ">텍스트 양끝선 정렬</p>
<p class="text-nowrap ">텍스트 줄바꿈 방지</p>
결과보기
[링크 밑줄 제거]
<a href="#" class="text-decoration-none ">링크 밑줄 제거</a>
결과보기
[텍스트 균등 너비]
<p class="text-monospace ">Monospaced text.</p>
결과보기
[텍스트 대소문자 처리]
<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>
</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>
결과보기
[pre 요소에 스크롤 생성]
<pre class="pre-scrollable ">...</pre>
결과보기
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>
결과보기
Other Display Classes (그외 노출 관련 클래스) ★
[요소 숨기기] ※ 다른 요소.
※ d- : display 의미.
<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-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-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 ">
</div>
<div class="d-table-cell ">
<div class="d-table-cell ">
</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 ">
</div>
<div class="d-md-table-cell ">
</div>
<div class="d-md-table-cell ">
</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>
결과보기
[인라인 플렉스박스] ※ 인라인형 플렉스박스 생성 후, 자식요소를 플렉스 아이템으로 만듦.
<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>
결과보기
