Bootstrap 4 유틸리티
Bootstrap 4에는 CSS 코드를 사용하지 않고도 요소의 스타일을 빠르게 지정할 수 있는 많은 유틸리티/도우미 클래스가 있다.
테두리
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>
테두리 색상
상황별 테두리 색상 클래스를 사용하여 테두리에 색상을 추가한다.
예제
<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>
테두리 반경
rounded 클래스가 있는 요소에 둥근 모서리를 추가한다.
예제
<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>
플로트 및 클리어픽스
.float-right 클래스가 있는 요소를 오른쪽으로 또는 .float-left 가 있는 왼쪽으로 플로팅 하고 .clearfix 클래스가 있는 플로트를 지운다.
예제
<div class="clearfix"> <span class="float-left">Float left</span> <span class="float-right">Float right</span> </div>
반응형 플로트
반응형 부동 클래스( – 여기서 *는 sm(>=576px), md(>=768px), lg(>=992px) 또는 xl(>=1200px))를 사용하여 화면 너비에 따라 요소를 왼쪽이나 오른쪽으로 부동화한다.
예제
<div class="float-sm-right">Float right on small screens or wider</div><br> <div class="float-md-right">Float right on medium screens or wider</div><br> <div class="float-lg-right">Float right on large screens or wider</div><br> <div class="float-xl-right">Float right on extra large screens or wider</div><br> <div class="float-none">Float none</div>
중앙 정렬
요소를 .mx-auto 클래스 중앙에 배치한다.
예제
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
너비
w-* 클래스( .w-25, .w-50, .w-75, .w-100, .mw-100)를 사용하여 요소의 너비를 설정한다.
예제
<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>
높이
h-* 클래스( .h-25, .h-50, .h-75, .h-100, .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="mh-100 bg-warning" style="height:500px">Max Height 100%</div> </div>
간격
Bootstrap 4에는 다양한 반응형 마진 및 패딩 유틸리티 클래스가 있다.
xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) 또는 xl(>=1200px)) 모든 중단점에서 작동한다.
{property}{sides}-{size}클래스는 for xs, {property}{sides}-{breakpoint}-{size}for sm, md, lg 및 xl 형식으로 사용된다.
{property}는 다음 중 하나다.
- m- 세트margin
- p- 세트padding
{sides}는 다음 중 하나다.
- t- 세트 margin-top또는padding-top
- b- 세트 margin-bottom또는padding-bottom
- l- 세트 margin-left또는padding-left
- r- 세트 margin-right또는padding-right
- x- padding-left와 padding-right또는 margin-left와 margin-right를 모두 설정한다.
- y- padding-top과 padding-bottom또는 margin-top과 margin-bottom를 모두 설정한다.
- 공백 – 요소의 4개 측면 모두에 margin 또는 padding을 설정한다.
{size}는 다음 중 하나다.
- 0- 세트 margin또는padding 0
- 1- margin 또는 padding을 (글꼴 크기가 16px인 경우 4px) .25rem으로 설정한다.
- 2- margin 또는 padding을 (글꼴 크기가 16px인 경우 8px) .5rem으로 설정한다.
- 3- margin 또는 padding을 (글꼴 크기가 16px인 경우 16px) 1rem으로 설정한다.
- 4- margin 또는 padding을 (글꼴 크기가 16px인 경우 24px) 1.5rem으로 설정한다.
- 5- margin 또는 padding을 (글꼴 크기가 16px인 경우 48px) 3rem으로 설정한다.
- auto- margin 자동으로 설정한다.
⭐ size 앞에 ”n”을 추가하여 여백을 음수로 설정할 수도 있다.
- n1- (글꼴 크기가 16px인 경우 -4px) margin이 -.25rem로 설정된다.
- n2- (글꼴 크기가 16px인 경우 -8px) margin이 -.5rem로 설정된다.
- n3- (글꼴 크기가 16px인 경우 -16px) margin이 -1rem로 설정된다.
- n4- (글꼴 크기가 16px인 경우 -24px) margin이 -1.5rem로 설정된다.
- n5- (글꼴 크기가 16px인 경우 -48px) margin이 -3rem로 설정된다.
예제
<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div> <div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div> <div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>
그림자
shadow-클래스를 사용하여 요소에 그림자를 추가한다.
예제
<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>
수직 정렬
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>
반응형 임베드
상위 항목의 너비를 기준으로 반응형 비디오 또는 슬라이드쇼 삽입을 만든다.
선택한 가로세로 비율을 사용하여 상위 요소의 삽입 요소(예: <iframe> 또는 <video>)에 추가한다.
예제
<!-- 21:9 aspect ratio --> <div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 1:1 aspect ratio --> <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
가시성
.visible 또는 .invisible 클래스를 사용하여 요소의 가시성을 제어한다.
⭐ 이러한 클래스는 CSS 표시 값을 변경하지 않는다.
예제
<div class="visible">I am visible</div> <div class="invisible">I am invisible</div>
위치
예제 1
.fixed-top 클래스를 사용하여 모든 요소를 고정하거나 페이지 상단에 유지한다.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>
예제 2
.fixed-bottom 클래스를 사용하여 모든 요소를 고정하거나 페이지 하단에 유지한다.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>
예제 3
스크롤할 때 페이지 상단에 요소를 고정하거나 유지하려면 .sticky-top 클래스를 사용한다.
⭐ 이 클래스는 IE11 및 이전 버전에서는 작동하지 않는다. position:relative;로 처리된다.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav>
닫기 아이콘
.close 클래스를 사용하여 닫기 아이콘의 스타일을 지정한다.
이는 경고 및 모달에 자주 사용된다.
실제 아이콘(더 보기 좋은 “x”)을 만들기 위해 기호를 사용한다는 점에 유의하자. 또한 기본적으로 오른쪽으로 부동한다는 점에 유의하자.
예제
<button type="button" class="close">×</button>
블록 요소
요소를 블록 요소로 만들려면 .d-block클래스를 추가한다.
요소가 특정 화면 너비에서 블록 요소가 되어야 하는 시점을 제어하려면 d-*-block 클래스 중 하나를 사용하자.
예제
<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>