색상 한눈에 (클래스 각인용)
bg-* / text-* / border-* 자주 쓰는 것bg-primary
text-white
bg-secondary
text-white
bg-success
text-white
bg-danger
text-white
bg-warning
text-dark
bg-info
text-dark
bg-light
text-dark
bg-dark
text-white
bg-primary bg-gradient
그라디언트는 “bg-gradient” 하나로 끝
카드 + 배지 + 반응형 그리드
12→6→4→3→2 자동(브레이크포인트)PRIMARY
text-bg-primary
secondary
border-primary + text-bg-primary
SUCCESS
success
info
DANGER
danger
warning
text-bg-warning는 자동 대비 처리됨
WARNING
warning
dark
테마 바뀌어도 유지
INFO
info
light
light는 다크에서 특히 유용
SECONDARY
secondary
primary
col-12 col-sm-6 ...
테이블 정렬 (간단 3줄)
th 클릭 → asc/desc 토글| 농가 | CO₂(ppm) | 최신사진시간 | 상태 |
|---|---|---|---|
| idx473 | 1,850 | 오늘 1시간 전 (2026-02-07 22:55:09) | OK |
| idx482 | 3,300 | 오늘 10분 전 (2026-02-08 00:12:33) | HIGH |
| idx475 | 2,400 | 오늘 30분 전 (2026-02-07 23:40:01) | WARN |
팁: 날짜는 data-sort="YYYY-MM-DD HH:MM:SS"면 문자열 정렬로도 잘 먹습니다.
폼 샘플 (자주 쓰는 것)
너무 많아지면 접어서
primary
secondary
success
danger
warning
info
light
dark
alert-primary
alert-warning
alert-danger