Màu sắc trong Bootstrap 4

Màu sắc trong Bootstrap 4

Bài viết này sẽ giới thiệu về Màu sắc trong Bootstrap 4, một số lớp mặc định hay dùng và cách sử dụng chúng trong framework này.

Màu sắc văn bản

Bootstrap 4 có nhiều lớp bối cảnh có thể dùng để định nghĩa “ý nghĩa thông qua màu sắc”.

Đó là .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (mặc định là màu văn bản chính của trang web, thường là màu đen) và .text-light.

Mau sac trong Bootstrap 4 1

Các lớp bối cảnh cũng có thể áp dụng với liên kết và thêm một màu nền tối hơn khi người dùng di chuột vào liên kết.

Mau sac trong Bootstrap 4 2

Ngoài ra, bạn có thể thêm 50% opacity (độ mờ) màu trắng hoặc đen cho văn bản bằng lớp .text-black-50 hoặc .text-white-50.

Mau sac trong Bootstrap 4 3

Màu nền

Các lớp dùng để định nghĩa màu nền là .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark và .bg-light.

Ghi nhớ rằng màu nền không áp dụng cho màu chữ nên trong một số trường hợp bạn phải sử dụng lớp .text-* cùng với màu nền để định nghĩa màu chữ.

Mau sac trong Bootstrap 4 4

Kết luận

Như vậy, bạn đã học các lớp mặc định để định nghĩa màu chữ, màu liên kết và màu nền trong Boostrap 4. Ngoài ra, bạn phải tự định nghĩa màu sắc khác trong thư viện màu sắc trong Bootstrap 4. Mời bạn theo dõi theo thêm series blog lập trình về Bootstrap.

Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Leave a Reply

Your email address will not be published. Required fields are marked *