বুটস্ট্র্যাপে কন্টেইনার (Containers in Bootstrap) - উদাহরণসহ

নাম অনুযায়ী, কন্টেইনার কিছু ধারণ বা বাঁধে রাখতে ব্যবহৃত হয়। বুটস্ট্র্যাপে কন্টেইনার কন্টেন্টকে ভিউপোর্টের ওপর রাখতে বা বাঁধতে ব্যবহৃত হয়। কন্টেইনার কন্টেন্টে প্যাডিং যোগ করে ভিউপোর্টের চারদিক থেকে মার্জিন প্রদান করে এবং এটি প্রয়োজন অনুযায়ী পরিবর্তন করা যায়। কন্টেইনার একে অপরের মধ্যে নেস্টেড ও হতে পারে।

container ক্লাস

বুটস্ট্র্যাপে .container ক্লাস একটি রেসপন্সিভ কন্টেইনার তৈরি করে যেটির একটি ফিক্সড প্রস্থ (fixed width) থাকে ভিউপোর্টে। এটি ভিউপোর্টের আকার অনুযায়ী কন্টেইনারের max-width সেট করে।

ভিউপোর্ট সাইজ অনুযায়ী max-width টেবিল

উদাহরণ

<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">
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

আউটপুট

container-fluid ক্লাস

বুটস্ট্র্যাপে .container-fluid ক্লাস একটি রেসপন্সিভ কন্টেইনার তৈরি করে যেটির প্রস্থ সবসময় ১০০% থাকে ভিউপোর্টে। এটি ভিউপোর্টের আকার নির্বিশেষে max-width ১০০% সেট করে।

ভিউপোর্ট সাইজ অনুযায়ী max-width টেবিল

উদাহরণ

<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>

আউটপুট