Bootstrap - [Utilities] - Utilities, 색상, 배경색, .d-block, .d-*-block

Chap.3 Bootstrap4[Utilities] - Utilities, 배경색, .d-block, .d-*-block

 

Bootstrap4 Utilities

Utilities, 색상, 배경색, .d-block, .d-*-block

 

Bootstrap4 Utilities

• .border, .boarder-*-*

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

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

 

• .clearfix, .float-left, .float-right

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

 

• .mx-auto : 중앙 정렬

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

 

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

 

• spacing

  - m : margin
  - p : padding
  - x, y, t, b, l, r
  - 0 : 0
  - 1 : .25rem (4px)
  - 2 : .5rem (8px)
  - 3 : 1rem (16px)
  - 4 : 1.5rem (24px)
  - 5 : 3rem (48px)
  - n1 : -.25rem (-4px)
  - n2 : -.5rem (-8px)
  - n3 : -1rem (-16px)
  - n4 : -1.5rem (-24px)
  - n5 : -3rem (-48px)
  - auto

<div class="pt-4 bg-warning">top padding (1.5rem = 24px)</div>
<div class="p-5 bg-success">padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">margin on all sides (3rem = 48px) and a bottom
	padding (3rem = 48px)</div>

 

• 수직 정렬

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

 

• .shadow-none, .shadow, .shadow-sm, .shadow-lg

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

 

• visiable, .invisible

<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>

 

• .close : close icon

<button type="button" class="close">&times;</button>

 

 

색상

• .text-muted

• .text-primary

• .text-success

• .text-info

• .text-warning

• .text-danger

• .text-secondary

• .text-white

• .text-dark

• .text-body (default body color/often black)

• .text-light

 

• .text-black-50, .text-white-50

<p class="text-black-50">Black text with 50% opacity on white background</p>
<p class="text-white-50 bg-dark">White text with 50% opacity on black
	background</p>

 

 

배경색

• .bg -primary,

• .bg -success,

• .bg -info,

• .bg -warning,

• .bg -danger,

• .bg -secondary,

• .bg -dark

• .bg -light

 

 

.d-block, .d-*-block

• .d-none : 숨김

• .d-*-none Hides an: 지정 스크린 크기에서 숨김

• .d-inline Makes : inline 보여주기

• .d-*-inline : 지정 스크린 크기에서 inline

• .d-inline-block : inline-block 보여주기

• .d-*-inline-block: 지정한 스크린 크기에서 inline-block으로 보여주기

• .d-table : 테이블 형식으로 보여주기

• .d-*-table : 지정한 스크린 크기에서 테이블 형식으로 보여주기

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