Lớp tiện ích (utilities) là phần dùng nhiều nhất của Bootstrap: chỉnh khoảng cách, màu, chữ, hiển thị, flex, kích thước, viền, bóng chỉ bằng một class. Bài này hệ thống quy luật đặt tên để bạn không cần học thuộc.
Bạn sẽ học được
- Dùng typography: display, lead, fw, fs, text-*
- Dùng màu theo chủ đề: primary, success, danger...
- Nắm quy luật spacing: m/p + t/b/s/e/x/y + 0–5
- Dùng tiện ích display, flex, kích thước, viền, bóng, vị trí
Một số khái niệm
Quy luật spacing: {thuộc tính}{phía}-{breakpoint}-{cỡ}. Thuộc tính: m (margin), p (padding). Phía: t trên, b dưới, s đầu (trái), e cuối (phải), x ngang, y dọc, bỏ trống = 4 phía. Cỡ: 0, 1 (.25rem), 2 (.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem), auto. Ví dụ mt-3, px-md-5, mx-auto.
| Nhóm | Ví dụ |
|---|---|
| Chữ | fs-4, fw-bold, fst-italic, text-uppercase, text-truncate, lh-lg |
| Căn chữ | text-center, text-md-start |
| Màu chữ / nền | text-primary, text-body-secondary, bg-success, bg-warning-subtle |
| Hiển thị | d-none, d-md-block, d-flex, d-grid |
| Flex | justify-content-between, align-items-center, gap-3, flex-wrap |
| Kích thước | w-50, h-100, mw-100, vh-100 |
| Viền | border, border-2, border-primary, rounded-3, rounded-pill |
| Bóng | shadow-sm, shadow, shadow-lg |
| Vị trí | position-relative, top-0, start-50, translate-middle |
Typography và màu
<div class="container">
<p class="display-6 fw-bold text-success mb-0">Học Bootstrap 5</p>
<p class="lead">Đoạn mở đầu nổi bật (lead).</p>
<p class="fs-5">fs-5 <span class="fw-semibold">fw-semibold</span> <span class="text-uppercase small">chữ hoa nhỏ</span> <mark>mark</mark></p>
<p><span class="badge text-bg-primary">primary</span> <span class="badge text-bg-secondary">secondary</span> <span class="badge text-bg-success">success</span> <span class="badge text-bg-danger">danger</span> <span class="badge text-bg-warning">warning</span> <span class="badge text-bg-info">info</span> <span class="badge text-bg-dark">dark</span></p>
<div class="p-2 bg-primary-subtle text-primary-emphasis border border-primary-subtle rounded">Nền nhạt -subtle, chữ -emphasis</div>
</div>Kết quả hiển thị
Khoảng cách, flex, viền, bóng
<div class="container">
<div class="d-flex justify-content-between align-items-center p-3 mb-3 bg-light border rounded-3">
<strong>Tự Học Tin</strong><div class="d-flex gap-2"><span class="px-2 py-1 bg-white border rounded-pill small">HTML</span><span class="px-2 py-1 bg-white border rounded-pill small">CSS</span></div>
</div>
<div class="row g-3">
<div class="col-4"><div class="p-3 shadow-sm rounded text-center">shadow-sm</div></div>
<div class="col-4"><div class="p-3 shadow rounded-4 text-center">shadow</div></div>
<div class="col-4"><div class="p-3 shadow-lg rounded-pill text-center bg-success text-white">pill</div></div>
</div>
<div class="position-relative mt-4 p-4 bg-body-tertiary rounded"><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99+</span>Hộp có nhãn đè góc</div>
</div>Kết quả hiển thị
Ẩn/hiện theo màn hình
<div class="d-none d-md-block">Chỉ hiện từ máy tính bảng trở lên</div>
<div class="d-md-none">Chỉ hiện trên điện thoại</div>
<span class="visually-hidden">Chỉ trình đọc màn hình nghe được</span>Mẹo hay
Gõ “bs5” trong VS Code sau khi cài tiện ích Bootstrap 5 Quick Snippets/IntelliSense để được gợi ý lớp.
Lưu ý
Đừng dùng quá nhiều lớp tiện ích lặp đi lặp lại cho cùng một thành phần ở nhiều nơi; khi đó hãy tạo lớp riêng hoặc dùng component có sẵn.
Thực hành
- Làm thanh tiêu đề: logo trái, menu phải bằng d-flex.
- Tạo 3 hộp thông báo dùng màu -subtle.
- Ẩn ảnh minh họa trên điện thoại bằng d-none d-md-block.
- Làm thẻ hồ sơ có bo góc, bóng, khoảng cách bằng tiện ích.
Tóm tắt bài học
- Màu chủ đề: primary, secondary, success, danger, warning, info, light, dark.
- Spacing: m/p + t/b/s/e/x/y + 0–5, có breakpoint.
- d-*, flex, gap, w-*, h-*, border, rounded, shadow.
- Typography: display-*, fs-*, fw-*, lead, text-*.