컴포넌트

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

라벨 (Label)

예제

.label .label-색상

  • Default
  • Light
  • Dark
  • Red
  • Blue
  • Green
  • Yellow
  • Purple
  • Brown
  • Orange
  • Indigo
  • Teal
  • Pink

예제

.label .label-색상 .rounded

  • Default
  • Light
  • Dark
  • Red
  • Blue
  • Green
  • Yellow
  • Purple
  • Brown
  • Orange
  • Indigo
  • Teal
  • Pink

예제

.label .label-색상 .rounded-3x

  • Default
  • Light
  • Dark
  • Red
  • Blue
  • Green
  • Yellow
  • Purple
  • Brown
  • Orange
  • Indigo
  • Teal
  • Pink
배지 (Badge)

예제

.badge .badge-색상

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

예제

.badge .badge-색상 .rounded

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

예제

.badge .badge-색상 .rounded-3x

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

예제

버튼 옵션과 배지 옵션을 조합하여 사용할수 있습니다.

소셜 아이콘

예제

예제

.rounded-2x

예제

.rounded-x

진행바

예제 - 상태

10% Complete
30% Complete
50% Complete
70% Complete
90% Complete

.progress-bar .progress-bar-info .progress-bar-success .progress-bar-warning .progress-bar-danger

예제 - 줄무늬

10% Complete
30% Complete
50% Complete
70% Complete
90% Complete

.progress-striped

예제 - 액티브

10% Complete
30% Complete
50% Complete
70% Complete
90% Complete

.progress-striped .active

예제 - 응용

20% Complete (danger)
40% Complete (warning)
30% Complete (success)
20% Complete (danger)
40% Complete (warning)
30% Complete (success)
20%
40%
30%
20% Complete (danger)
40% Complete (warning)
30% Complete (success)
20%
40%
30%

여러가지 조합으로 응용이 가능합니다.

예제 - 색상

진행률 20%
진행률 30%
진행률 40%
진행률 50%
진행률 60%
진행률 70%

.progress-bar-default .progress-bar-dark .progress-bar-red .progress-bar-blue .progress-bar-green .progress-bar-yellow

예제 - 색상

진행률 20%
진행률 30%
진행률 40%
진행률 50%
진행률 60%
진행률 70%

.progress-bar-purple .progress-bar-brown .progress-bar-orange .progress-bar-indigo .progress-bar-teal .progress-bar-pink

예제 - 크기

진행률 50%
진행률 50%
진행률 50%
진행률 50%
진행률 50%

.progress-xxs .progress-xs .progress-sm .progress-lg

예제 - 라운드, 응용

진행률
진행률 50%
진행률 50%
진행률 50%
진행률 50%

.rounded .rounded-2x .rounded-3x .rounded-4x

예제 - 줄무늬

진행률 50%
진행률 50%
진행률 50%
진행률 50%
진행률 50%
진행률 50%

.progress-striped

예제 - 액티브

진행률 50%
진행률 50%
진행률 50%
진행률 50%
진행률 50%
진행률 50%

.progress-striped .active

위 옵션들의 조합으로 좀더 다양한 응용이 가능합니다.

진행바 - Vertical

예제 - 색상

30%
70%
50%
20%
40%
90%

예제 - 색상, 라운드

30%
70%
50%
20%
40%
90%

예제 - 줄무늬

30%
70%
50%
20%
40%
90%

예제 - 액티브

30%
70%
50%
20%
40%
90%

컨텐츠 박스

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

예제

Aenean Sollicitudin

Etiam porta sem malesuada magna mollis euismod.

Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.

예제

Aenean Sollicitudin

Etiam porta sem malesuada magna mollis euismod.

Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.

패널

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

예제

Primary Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Info Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Success Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Warning Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Danger Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Default Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Dark Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Red Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Blue Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Green Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Yellow Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Purple Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Brown Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Orange Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Indigo Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Teal Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Pink Panel

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.