Biên giới Bootstrap 5

Trong bootstrap 5 đường viền được tạo bằng cách thêm. lớp viền cho bất kỳ thẻ div hoặc hình ảnh nào hoặc bất kỳ biểu mẫu hoặc vùng văn bản nào

Các lớp áp dụng Border

Bootstrap 5 cung cấp một vài lớp để chỉ định đường viền cho bất kỳ phần tử HTML nào được giải thích bên dưới

Biên giới

lớp viền được sử dụng để áp dụng các đường viền trên cả bốn mặt của hộp

Mã số

< div class="vùng chứa mb-5 . Ngoại lệ ipsum culpa neque commodi modi eaque?>
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            < /div>
        </div>
    </div>

Đây là cách bạn tạo viền cho cả 4 cạnh

Biên giới trên cùng

lớp border-top được sử dụng để áp dụng đường viền ở mặt trên của hộp

Mã số

< div class="vùng chứa mb-5 . Ngoại trừ ipsum culpa neque commodi modi eaque?>
  <h3 class="py-3 text-center">Border Classes</h3>
  <div class="col-md-4 mx-auto">
    <div class="border-top p-5">
      Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
      < /div >  </div>
</div>

Đây là cách bạn tạo viền cho mặt trên

Đường viền dưới cùng

lớp border-bottom được sử dụng để áp dụng đường viền ở phía dưới cùng của hộp

Mã số

< div class="vùng chứa mb-5 . Ngoại trừ ipsum culpa neque commodi modi eaque?>
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border-bottom p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            < /div >        </div>
    </div>

Đây là cách bạn tạo viền cho mặt dưới

Biên giới bắt đầu

lớp bắt đầu đường viền được sử dụng để áp dụng đường viền ở phía bên trái của hộp

Mã số

< div class="vùng chứa mb-5 . Ngoại trừ ipsum culpa neque commodi modi eaque?>
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border-start p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            < /div >        </div>
    </div>

Đây là cách bạn tạo viền cho bên trái

Kết thúc biên giới

lớp border-end được sử dụng để áp dụng đường viền ở phía bên phải của hộp

Mã số

< div class="vùng chứa mb-5 . Ngoại trừ ipsum culpa neque commodi modi eaque?>
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border-end p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            < /div >        </div>
    </div>

Đây là cách bạn tạo viền cho bên phải

Các lớp để loại bỏ Border

Để xóa đường viền khỏi bất kỳ phía nào, chỉ cần thêm -0 vào bất kỳ lớp thêm đường viền nào

Từ đầu

Để xóa đường viền khỏi đầu thêm. đường viền-top-0 với. lớp biên giới

Mã số

< div class="vùng chứa mb-5 . Ngoại trừ ipsum culpa neque commodi modi eaque?>
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border border-top-0 p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            < /div >        </div>
    </div>

Đây là cách bạn xóa đường viền khỏi đầu

Từ đáy

Để xóa đường viền từ phía dưới, hãy thêm. đường viền dưới cùng-0 với. lớp biên giới

Mã số

< div class="vùng chứa mb-5 . Ngoại trừ ipsum culpa neque commodi modi eaque?>
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border border-bottom-0 p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            < /div >        </div>
    </div>

Đây là cách bạn loại bỏ đường viền từ phía dưới

Từ trái

Để xóa đường viền từ bên trái, hãy thêm. đường viền-bắt đầu-0 với. lớp biên giới

Mã số

< div class="vùng chứa mb-5 . Ngoại trừ ipsum culpa neque commodi modi eaque?>
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border border-start-0 p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            < /div >        </div>
    </div>

Đây là cách bạn loại bỏ đường viền từ phía bên trái

Từ phải sang

Để xóa đường viền khỏi bên phải, hãy thêm. biên giới-end-0 với. lớp biên giới

Mã số

< div class="vùng chứa mb-5 . Ngoại trừ ipsum culpa neque commodi modi eaque?>
        <h3 class="py-3 text-center">Border Classes</h3>
        <div class="col-md-4 mx-auto">
            <div class="border border-end-0 p-5">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque commodi modi eaque?
            < /div >        </div>
    </div>

Đây là cách bạn xóa đường viền từ phía bên phải

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

Để thêm màu đường viền, chỉ cần thêm. biên giới chính/thông tin/thành công/nguy hiểm/cảnh báo/tối với. lớp biên giới

Mã số

< div class="vùng chứa mb-5>
        <h3 class="py-3 text-center">Border Classes</h3>
    <div class="row">
        <div class="col-md-2">
            <div class="border border-primary p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-danger p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-warning p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-success p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-info p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-dark p-5"></div>
        </div>
    </div>
</div>

Đây là cách bạn tô màu cho đường viền của mình

Các lớp chiều rộng đường viền

Để tạo độ dày cho đường viền của bạn, hãy sử dụng. lớp viền-1/2/3/4/5 với. lớp biên giới

Mã số

< div class="vùng chứa mb-5>
        <h3 class="py-3 text-center">Border Classes</h3>
    <div class="row">
        <div class="col-md-2">
            <div class="border border-1 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-2 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-3 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-4 p-5"></div>
        </div>
        <div class="col-md-2">
            <div class="border border-5 p-5"></div>
        </div>
    </div>
 </div>

Đây là cách bạn tạo độ dày cho đường viền của mình

Bán kính đường viền

Để chỉ định bán kính của đường viền, hãy sử dụng. tròn,. các lớp làm tròn/kết thúc/dưới/bắt đầu/vòng tròn/viên thuốc

Làm cách nào để xác định đường viền trong Bootstrap?

Làm cách nào để đặt đường viền cho biểu mẫu trong Bootstrap?

Làm cách nào để cung cấp kích thước đường viền trong Bootstrap?

Làm cách nào để cung cấp màu đường viền bảng trong Bootstrap?