Container trong Bootstrap với ví dụ

Như tên gọi cho thấy, container được dùng để chứa hoặc gom nhóm nội dung. Tương tự, container trong Bootstrap được dùng để lưu trữ hoặc gom nội dung trên viewport. Container thêm padding cho nội dung bằng cách cung cấp margin từ cả bốn phía của viewport và có thể điều chỉnh tùy theo nhu cầu. Container cũng có thể được lồng vào nhau.

Bây giờ, hãy hiểu chi tiết từng lớp

container

Trong Bootstrap, lớp .container tạo một container phản hồi (responsive) với chiều rộng cố định trong viewport. Nó đặt max-width của container tùy thuộc vào kích thước viewport.

Dưới đây là biểu đồ mô tả max-width của lớp .container tùy thuộc vào kích thước viewport.

Ví dụ

Hãy xem một ví dụ để hiểu rõ hơn

<html> <head> <title>.Container Class</title> <!-- Bootstrap Links --><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body style="border:5px solid Black;"> <br> <div class="container bg-dark text-white" style> <center> <h1>tutorialspoint</h1> <h6>SIMPLYEASYLEARNING</h6> </center> </div> </body> </html>

Đầu ra

Đầu ra cho mã này sẽ là

container-fluid

Trong Bootstrap, lớp .container-fluid tạo một container phản hồi với chiều rộng cố định 100% trong viewport. Nó đặt max-width của container là 100% bất kể kích thước viewport.

Dưới đây là biểu đồ mô tả max-width của lớp .container-fluid.

Ví dụ

Hãy xem một ví dụ để hiểu rõ hơn

<html> <head> <title>.Container Class</title> <!-- Bootstrap Links --><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body style="border:5px solid Black;"> <br> <div class="container-fluid bg-dark text-white"> <center> <h1>tutorialspoint</h1> <h6>SIMPLYEASYLEARNING</h6> </center> </div> </body> </html>

Đầu ra

Đầu ra cho mã này sẽ là