Các lớp tiện ích của Bootstrap

Trong hướng dẫn này, bạn sẽ tìm hiểu về các lớp tiện ích của Bootstrap.

Các lớp màu

Bạn có thể sử dụng các lớp màu theo ngữ cảnh để nhấn mạnh văn bản và truyền tải ý nghĩa thông qua màu sắc. Đây là danh sách đầy đủ các lớp màu theo ngữ cảnh có sẵn.

Tên lớp Mô tả
.text-primary Áp dụng màu xanh lam (#007bff) trên văn bản.
.text-secondary Áp dụng màu xám (#6c757d) trên văn bản.
.text-success Áp dụng màu xanh lá (#28a745) trên văn bản.
.text-danger Áp dụng màu đỏ (#dc3545) trên văn bản.
.text-warning Áp dụng màu vàng (#ffc107) trên văn bản.
.text-info Áp dụng màu mòng két (#17a2b8) trên văn bản.
.text-light Áp dụng màu xám rất nhạt (#f8f9fa) trên văn bản.
.text-dark Áp dụng màu xám đậm (#343a40) trên văn bản.
.text-body Áp dụng màu văn bản mặc định của Bootstrap (#212529) trên văn bản.
.text-muted Áp dụng màu xám nhạt (#6c757d) trên văn bản.
.text-white Áp dụng màu trắng (#fff) trên văn bản.
.text-black-50 Áp dụng màu đen 50% trong suốt (rgba(0,0,0,.5)) trên văn bản.
.text-white-50 Áp dụng màu trắng 50% trong suốt (rgba(255,255,255,.5)) trên văn bản.

Các lớp màu nền

Tương tự như các lớp màu theo ngữ cảnh, bạn có thể sử dụng các lớp màu nền theo ngữ cảnh để thiết lập background-color của một phần tử nhằm tạo điểm nhấn mạnh hơn cho chúng.

Class Description
.bg-primary Áp dụng màu nền xanh lam (#007bff) trên một phần tử.
.bg-secondary Áp dụng màu nền xám (#6c757d) trên một phần tử.
.bg-success Áp dụng màu nền xanh lá (#28a745) trên một phần tử.
.bg-danger Áp dụng màu nền đỏ (#dc3545) trên một phần tử.
.bg-warning Áp dụng màu nền vàng (#ffc107) trên một phần tử.
.bg-info Áp dụng màu nền mòng két (#17a2b8) trên một phần tử.
.bg-light Áp dụng màu nền xám nhẹ (#f8f9fa) trên một phần tử.
.bg-dark Áp dụng màu nền xám đậm (#343a40) trên một phần tử.
.bg-white Áp dụng màu nền trắng (#fff) trên một phần tử.
.bg-transparent Áp dụng màu nền trong suốt (transparent) trên một phần tử.

Các lớp căn chỉnh văn bản

Bạn có thể sử dụng các lớp căn chỉnh văn bản này để căn chỉnh và định dạng nội dung văn bản của mình.

Tên lớp Mô tả
.text-start Căn chỉnh văn bản sang trái.
.text-center Căn giữa văn bản.
.text-end Căn chỉnh văn bản sang bên phải.
.text-wrap Bọc văn bản tràn.
.text-nowrap Ngăn không cho văn bản bị bao bọc.
.text-truncate Cắt ngắn văn bản bằng dấu chấm lửng.
.text-break Ngắt những từ dài để khỏi bị tràn.
.text-lowercase Chuyển văn bản thành chữ thường.
.text-uppercase Chuyển văn bản thành chữ hoa.
.text-capitalize Viết hoa chữ cái đầu tiên của mỗi từ.
.fw-bold Đặt font-weight của một phần tử thành bold.
.fw-bolder Đặt font-weight của một phần tử thành bolder (so với phần tử cha).
.fw-normal Đặt font-weight của một phần tử thành normal.
.fw-light Đặt font-weight của một phần tử thành light.
.fw-lighter Đặt font-weight của một phần tử thành lighter (so với phần tử cha).
.fst-italic Đặt font-style của một phần tử thành italic.
.fst-normal Đặt font-style của một phần tử thành bình thường.
.font-monospace Đặt font-family của một phần tử thành font monospace (chiều rộng cố định)
.text-reset Đặt lại màu của văn bản hoặc liên kết (kế thừa màu từ cha của nó).
.text-decoration-none Xóa trang trí văn bản chẳng hạn như gạch chân khỏi văn bản.
.text-decoration-underline Thêm gạch chân vào văn bản.
.text-decoration-line-through Thêm dòng gạch ngang vào giữa văn bản.

Các lớp đường viền

Bạn có thể sử dụng các lớp tiện ích đường viền để nhanh chóng tạo kiểu đường viền và bán kính đường viền của một phần tử. Chúng rất hữu ích cho hình ảnh, nút hoặc bất kỳ phần tử nào khác.

Tên lớp Mô tả
.border Thêm đường viền trên tất cả các mặt của một phần tử.
.border-top Thêm đường viền ở phía trên cùng của một phần tử.
.border-end Thêm đường viền ở phía bên phải của một phần tử.
.border-bottom Thêm một đường viền ở phía dưới cùng của một phần tử.
.border-start Thêm đường viền ở phía bên trái của một phần tử.
.border-0 Xóa đường viền khỏi tất cả các mặt của một phần tử.
.border-top-0 Xóa đường viền khỏi mặt trên của một phần tử.
.border-end-0 Xóa đường viền từ phía bên phải của một phần tử.
.border-bottom-0 Loại bỏ đường viền từ phía dưới cùng của một phần tử.
.border-start-0 Loại bỏ đường viền từ phía bên trái của một phần tử.
.border-primary Thay đổi màu đường viền của một phần tử thành màu xanh lam (#007bff).
.border-secondary Thay đổi màu đường viền của một phần tử thành màu xám (#6c757d).
.border-success Thay đổi màu đường viền của một phần tử thành màu xanh lục (#28a745).
.border-danger Thay đổi màu viền của một phần tử thành màu đỏ (#dc3545).
.border-warning Thay đổi màu đường viền của một phần tử thành màu vàng (#ffc107).
.border-info Thay đổi màu viền của một phần tử thành màu xanh mòng két (#17a2b8).
.border-light Thay đổi màu đường viền của một phần tử thành màu xám rất nhạt (#f8f9fa).
.border-dark Thay đổi màu đường viền của một phần tử thành màu xám đậm (#343a40).
.border-white Thay đổi màu đường viền của một phần tử thành màu trắng (#fff).
.rounded Làm tròn tất cả các góc của một phần tử.
.rounded-top Làm tròn các góc trên cùng bên trái và trên cùng bên phải của một phần tử.
.rounded-end Làm tròn các góc trên cùng bên phải và dưới cùng bên phải của một phần tử.
.rounded-bottom Làm tròn các góc dưới cùng bên trái và dưới cùng bên phải của một phần tử.
.rounded-start Làm tròn các góc trên cùng bên trái và dưới cùng bên trái của một phần tử.
.rounded-circle Làm tròn một phần tử thành hình tròn.
.rounded-pill Làm tròn một phần tử thành hình viên thuốc.
.rounded-0 Xóa các góc tròn khỏi một phần tử.
.rounded-1 Đặt bán kính đường viền (border-radius) là 0,2rem cho một phần tử.
.rounded-2 Đặt bán kính đường viền (border-radius) là 0,25rem cho một phần tử.
.rounded-3 Đặt bán kính đường viền (border-radius) là 0,3rem cho một phần tử.

Các lớp khoảng cách

Bạn có thể sử dụng các lớp tiện ích khoảng cách để nhanh chóng điều chỉnh lề và phần đệm của một phần tử.

Ký tự # trong các lớp .mt-#, .pt-# v.v. đại diện cho kích thước của lề hoặc phần đệm. Giá trị của kích thước có thể là một số nguyên từ 0 đến 5 hoặc auto.

Kích thước 0 loại bỏ hoàn toàn lề hoặc phần đệm bằng cách đặt nó thành 0, trong khi giá trị auto đặt lề thành tự động. Các số nguyên từ 1 đến 5đặt lề hoặc phần đệm tăng dần (từ 0,25rem đến 3rem). Hãy thử các ví dụ để xem nó hoạt động như thế nào:

Tên lớp Mô tả
.mt-# Đặt lề trên của một phần tử.
.mb-# Đặt lề dưới cùng của một phần tử.
.ms-# Đặt lề trái của một phần tử.
.me-# Đặt lề phải của một phần tử.
.mx-# Đặt lề trái và lề phải của một phần tử.
.my-# Đặt lề trên và lề dưới của một phần tử.
.pt-# Đặt phần đệm trên cùng của một phần tử.
.pb-# Đặt phần đệm dưới cùng của một phần tử.
.ps-# Đặt phần đệm bên trái của một phần tử.
.pe-# Đặt phần đệm bên phải của một phần tử.
.px-# Đặt phần đệm bên trái và bên phải của một phần tử.
.py-# Đặt phần đệm trên cùng và dưới cùng của một phần tử.
Mẹo: Bạn cũng có thể áp dụng lề âm bằng cách sử dụng các lớp tiện ích lề. Chỉ cần thêm số kích thước với ký tự n ở phía trước, ví dụ: .mt-n1, .mb-n2, v.v.

Các lớp float

Bạn có thể sử dụng các lớp tiện ích float để nhanh chóng làm một phần tử sang trái hoặc phải hoặc xóa hoàn toàn float khỏi một phần tử. Đây là danh sách các lớp float có sẵn.

Tên lớp Mô tả
.float-start Làm nổi một phần tử sang bên trái.
.float-end Làm nổi một phần tử sang bên phải.
.float-none Tắt tính năng nổi từ một phần tử.
.clearfix Xóa nổi để ngăn phần tử gốc không bị thu gọn.
.float-*-start Làm nổi một phần tử sang bên trái dựa trên kích thước khung nhìn.
.float-*-end Làm nổi một phần tử sang bên phải dựa trên kích thước khung nhìn.
.float-*-none Tắt tính năng nổi từ một phần tử dựa trên kích thước khung nhìn.
Mẹo: Ký tự * trong các lớp .float-*-left.float-*-right đại diện cho điểm ngắt responsive có thể là sm, md, lg, xl hoặc xxl. Xem hệ thống lưới Bootstrap để biết thêm chi tiết.

Các lớp tạo bóng

Bạn có thể sử dụng các lớp tiện ích tạo bóng để nhanh chóng thêm hoặc xóa bóng cho các phần tử.

Tên lớp Mô tả
.shadow Thêm bóng đổ vào một phần tử.
.shadow-sm Thêm một bóng đổ nhỏ vào một phần tử.
.shadow-lg Thêm một bóng đổ lớn hơn vào một phần tử.
.shadow-none Loại bỏ bóng khỏi một phần tử.

Các lớp định kích thước

Bạn có thể sử dụng các lớp tiện ích định kích thước để dễ dàng tạo một phần tử rộng hoặc cao.

Tên lớp Mô tả
.w-25 Đặt chiều rộng của một phần tử bằng 25% so với phần tử cha của nó.
.w-50 Đặt chiều rộng của một phần tử bằng 50% phần tử cha của nó.
.w-75 Đặt chiều rộng của một phần tử bằng 75% phần tử cha của nó.
.w-100 Đặt chiều rộng của một phần tử bằng 100% phần tử cha của nó.
.w-auto Đặt chiều rộng của một phần tử thành tự động, tức là trình duyệt sẽ tính toán và chọn chiều rộng cho phần tử được chỉ định.
.mw-100 Đặt chiều rộng tối đa của một phần tử thành 100%.
.h-25 Đặt chiều cao của một phần tử thành 25% của phần tử cha của nó.
.h-50 Đặt chiều cao của một phần tử thành 50% của phần tử cha của nó.
.h-75 Đặt chiều cao của một phần tử thành 75% của phần tử cha của nó.
.h-100 Đặt chiều cao của một phần tử thành 100% của phần tử cha của nó.
.h-auto Đặt chiều cao của một phần tử thành tự động, tức là trình duyệt sẽ tính toán và chọn chiều cao cho phần tử được chỉ định.
.mh-100 Đặt chiều cao tối đa của một phần tử thành 100%.
.vw-100 Đặt chiều rộng của một phần tử bằng 100% chiều rộng của khung nhìn.
.min-vw-100 Đặt chiều rộng tối thiểu của một phần tử thành 100% chiều rộng của khung nhìn.
.vh-100 Đặt chiều cao của một phần tử bằng 100% chiều cao của khung nhìn.
.min-vh-100 Đặt chiều cao tối thiểu của một phần tử thành 100% chiều cao của khung nhìn.

Các lớp căn chỉnh dọc

Bạn có thể sử dụng các lớp tiện ích căn chỉnh theo chiều dọc để nhanh chóng thay đổi căn chỉnh theo chiều dọc của các phần tử ô trong hàng, khối nội tuyến, bảng nội tuyến và ô bảng.

Tên lớp Mô tả
.align-baseline Căn chỉnh đường cơ sở của phần tử với đường cơ sở của phần tử gốc.
.align-top Căn chỉnh đầu của phần tử với đầu của toàn bộ dòng.
.align-middle Căn chỉnh phần tử ở giữa phần tử cha.
.align-bottom Căn chỉnh phần dưới cùng của phần tử với phần dưới cùng của toàn bộ dòng.
.align-text-top Căn chỉnh phần trên cùng của phần tử với phần trên cùng của phông chữ của phần tử cha.
.align-text-bottom Căn chỉnh phần dưới cùng của phần tử với phần dưới cùng của phông chữ của phần tử cha.

Các lớp vị trí

Bạn có thể sử dụng các lớp tiện ích vị trí để nhanh chóng cấu hình vị trí của một phần tử.

Tên lớp Mô tả
.position-static Đặt vị trí của phần tử thành tĩnh.
.position-relative Đặt vị trí của phần tử thành tương đối.
.position-absolute Đặt vị trí của phần tử thành tuyệt đối.
.position-fixed Đặt vị trí của phần tử thành cố định.
.position-sticky Đặt vị trí của phần tử thành dính.
.fixed-top Định vị một phần tử ở đầu khung nhìn.
.fixed-bottom Định vị một phần tử ở dưới cùng của khung nhìn.
.sticky-top Đặt một phần tử ở đầu khung nhìn, chỉ xảy ra sau khi bạn cuộn qua nó.

Các lớp hiển thị

Bạn có thể sử dụng các lớp tiện ích hiển thị để chuyển đổi giá trị hiển thị của một phần tử một cách nhanh chóng. Bạn cũng có thể kiểm soát màn hình của phần tử khi in trang.

Tên lớp Mô tả
.d-none Ẩn một phần tử. Nó không chiếm bất kỳ không gian nào trong bố cục.
.d-inline Buộc một phần tử tạo một hộp nội tuyến.
.d-inline-block Buộc một phần tử tạo một hộp khối sẽ được truyền với nội dung xung quanh, tức là trong cùng một dòng với nội dung liền kề như hộp nội tuyến.
.d-block Buộc một phần tử tạo hộp khối.
.d-table Buộc một phần tử hoạt động giống như một phần tử <table>.
.d-table-row Buộc một phần tử hoạt động giống như một phần tử <tr>.
.d-table-cell Buộc một phần tử hoạt động giống như một phần tử <td>.
.d-flex Buộc một phần tử tạo hộp chứa linh hoạt.
.d-inline-flex Buộc một phần tử tạo hộp chứa linh hoạt cấp nội tuyến.

Bạn cũng có thể sử dụng các điểm ngắt responsive (sm, md, lg, xlxxl) với các lớp tiện ích hiển thị này để hiển thị hoặc ẩn các phần tử tùy thuộc vào chiều rộng khung nhìn bằng cách sử dụng định dạng , ví dụ .d-sm-none, .d-md-block, .d-lg-block, .d-xl-block, .d-xxl-block, v.v.

Để có đầy đủ các lớp tiện ích flex, vui lòng xem trang tham khảo Bootstrap flex.

Mẹo: Bạn có thể tạo biến thể in của các lớp hiển thị để thay đổi giá trị hiển thị của các phần tử khi in bằng cách chỉ cần chèn chuỗi print- vào sau .d-, ví dụ : .d-print-none, .d-print-inline, .d-print-block, .d-print-table, v.v.

Các lớp khác

Đây là danh sách một số lớp tiện ích khác có thể được sử dụng cho các mục đích khác nhau.

Tên lớp Mô tả
.btn-close Tạo icon đóng chung để tắt các thành phần như modal và alert.
.overflow-auto Cung cấp thanh cuộn để xem nội dung bị tràn của một phần tử nếu được yêu cầu.
.overflow-hidden Ẩn nội dung bị tràn của một phần tử.
.overflow-visible Hiển thị nội dung tràn của một phần tử.
.overflow-scroll Cung cấp thanh cuộn để xem nội dung bị tràn của một phần tử.
.stretched-link Làm cho một phần tử có thể nhấp được bằng cách kéo dài một liên kết lồng nhau.
.visible Hiển thị một phần tử.
.invisible Làm cho một phần tử ẩn nhưng nó vẫn chiếm dung lượng trong trang.
.visually-hidden Ẩn một phần tử đối với tất cả các thiết bị ngoại trừ trình đọc màn hình.
BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.