คอนเทนเนอร์ใน Bootstrap พร้อมตัวอย่าง

คอนเทนเนอร์ใน Bootstrap ใช้สำหรับเก็บหรือผูกเนื้อหาบน viewport เพิ่ม padding ให้เนื้อหาโดยให้ margin ทุก 4 ด้าน และสามารถปรับเปลี่ยนได้ คอนเทนเนอร์ยังสามารถซ้อนกันได้

container

คลาส .container สร้างคอนเทนเนอร์ที่ตอบสนอง (responsive) มีความกว้างคงที่ใน viewport กำหนด max-width ตามขนาด viewport

ตัวอย่าง

<html> <head> <title>.Container Class</title> <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"> <center> <h1>tutorialspoint</h1> <h6>SIMPLYEASYLEARNING</h6> </center> </div> </body> </html>

เอาต์พุต

ผลลัพธ์จากโค้ดจะเป็นดังภาพ

container-fluid

คลาส .container-fluid สร้างคอนเทนเนอร์ responsive ความกว้าง 100% ใน viewport ทุกขนาด

ตัวอย่าง

<html> <head> <title>.Container Class</title> <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>

เอาต์พุต

ผลลัพธ์จากโค้ดจะเป็นดังภาพ