부트스트랩4에는 CSS코드를 사용하지 않고도 요소를 빠르게 스타일화할 수 있는 유틸리티/헬퍼 클래스가 많습니다.

테두리(Borders)

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)

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

rounded 클래스를 사용하면 모서리가 부드러운 테두리를 만들 수 있습니다.

<span class="rounded"></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

.float-right, float-left클래스로 오른쪽 또는 왼쪽으로 요소를 띄우거나 .clearfix클래스를 이용하여 지울 수 있습니다.

<div class="clearfix">
    <span class="float-left">Float left</span>
    <span class="float-right">Float right</span>
</div>

반응형 Floats (Responsive)

반응형 float 클래스를 사용하면 화면 너비에 따라 요소를 왼쪽 또는 오른쪽으로 플로팅합니다.

(.float-*-left|right - 여기에서 * 는 sm(>=576px), md(>=768px), lg(>=992px), xl(>=1200px)

<div class="clearfix">
    <div class="float-sm-right">작은 화면이상에서 오른쪽 플로팅</div><br>
    <div class="float-md-right">중간 화면이상에서 오른쪽 플로팅</div><br>
    <div class="float-lg-right">대형 화면이상에서 오른쪽 플로팅</div><br>
    <div class="float-xl-right">초대형 화면이상에서 오른쪽 플로팅</div><br>
    <div class="float-none">플로팅안함</div>
</div>

중앙 정렬

.mx-auto 클래스로 요소 가운데 맞춤을 할 수 있습니다.

<div class="mx-auto bg-warning">중앙정렬을 합니다</div>

Width(너비)

w-*클래스를 사용하여 요소의 너비를 설정할 수 있습니다. (.w-25, .w-50, .w-75, .w-100, .mw-100)

<div class="w-25 bg-success">Width 25%</div>
<div class="w-50 bg-success">Width 50%</div>
<div class="w-75 bg-success">Width 75%</div>
<div class="w-100 bg-success">Width 100%</div>
<div class="mw-100 bg-success">Max Width 100%</div>

Height

h-* 클래스를 사용하여 요소의 높이를 설정할 수 있습니다.(.h-25, .h-50, .h-75, .h-100, .mh-100)

<div class="h-25 d-inline-block p-2 bg-success">Height 25%</div>
<div class="h-50 d-inline-block p-2 bg-success">Height 50%</div>
<div class="h-75 d-inline-block p-2 bg-success">Height 75%</div>
<div class="h-100 d-inline-block p-2 bg-success">Height 100%</div>
<div class="mh-100 d-inline-block p-2 bg-success" style="height:500px">Max Height 100%</div>

Spacing(여백)

부트스트랩4에는 광범위한 반응형 margin(바깥여백)과 padding(안쪽여백) 유틸리티 클래스가 있습니다. 모든 중단점에서 작동합니다. xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px))

클래스의 형태

xs : {property}{sides}-{size}

sm, md, lg, xl : {property}{sides}-{breakpoint}-{size}

여기서 {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)
  
• blank - 4방향 모두 margin 또는 padding
  

{size}는

0 - margin 또는 padding 값을 0

1 - margin 또는 padding 값을 .25rem (4px, 웹문서 기본값이 16px인 경우)

2 - margin 또는 padding 값을 .5rem (8px, 웹문서 기본값이 16px인 경우)

3 - margin 또는 padding 값을 1rem (16px, 웹문서 기본값이 16px인 경우)

4 - margin 또는 padding 값을 1.5rem (24px, 웹문서 기본값이 16px인 경우)

5 - margin 또는 padding 값을 3rem (48px, 웹문서 기본값이 16px인 경우)

auto - margin 값을 auto

<div class="pt-4 bg-primary">padding-top:24px (1.5rem = 24px)</div>
<div class="mt-1 p-5 bg-danger">margin-top:4px (.25rem = 4px) , padding:48px (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">margin:48px (3rem = 48px) , padding-bottom:48px (3rem = 48px)</div>

수직 정렬(Vertical Align)

요소의 정렬을 변경하려면 align-클래스를 사용합니다. (inline, inline-block, inline-table, 표 셀에서만 적용됩니다.)

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

위치 지정 (Position)

페이지 상단에 요소를 고정/머물게 하려면 .fixed-top클래스를 사용합니다.

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

페이지 하단에 요소를 고정/머물게 하려면 .fixed-bottom클래스를 사용합니다.

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

** .sticky-top클래스를 사용하면 페이지를 스크롤할 때 상단에 고정/유지되도록 합니다. (이 클래스는 IE11이전 버전에서는 작동하지 않습니다. position:relative으로 처리합니다.)

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