FullStack Academy

Border trong Bootstrap 4

Trong bài viết này, mình sẽ tập trung vào hướng dẫn các bạn những class liên quan đến border trong Bootstrap 4.  Hi vọng bài viết sẽ hữu ích cho các bạn trong quá trình làm website với Bootstrap. 

Class Borders

Border là 1 thuộc tính Box Model giúp chúng ta có đường viền của 1 đối tượng nào đó, thông thường làm CSS thì chúng ta sẽ code thuộc tính border đi kèm với các giá trị màu, kiểu và độ dày đường viền. Còn trong Bootstrap 4 cũng hỗ trợ class .border để các bạn trang trí nhanh hơn, chỉ cần gọi class và sử dụng.

Ví dụ như sau:


 

Border Color – Màu sắc đường viền

Định dạng đường viền có rồi, giờ trang trí màu sắc cho đường viền với class như sau:

  • border-primary
  • border-secondary
  • border-success
  • border-danger
  • border-warning
  • border-info
  • border-light
  • border-dark
  • border-white

Mỗi class sẽ được sử dụng trong từng ngữ cảnh thích hợp.



 

Border Radius

Border Radius giúp bo viền các góc cho khối, Bootstrap 4 hỗ trợ các class bo viền là .rounded

Ví dụ:



 

Kết luận

Như vậy các bạn đã biết thêm một class nữa về border trong bootstrap. Hẹn các bạn trong bài học sau. Chúc các bạn học tốt.