Bootstrap 5 কনটেইনার

Bootstrap 5 কনটেইনার

পূর্ববর্তী চ্যাপ্টার থেকে আপনি শিখেছেন যে, Bootstrap-এর জন্য সাইটের কনটেন্টকে আবৃত্ত করে সংযুক্ত করা প্রয়োজন

আমরা কন্টেনারে কনটেন্ট পূর্ণতা করি এবং দুটি কন্টেনার শ্রেণী উপলব্ধ রয়েছে:

  • .container শ্রেণী একটি প্রতিক্রিয় স্থির প্রস্থতা কন্টেনার তৈরি করে
  • .container-fluid শ্রেণী একটি সম্পূর্ণ প্রস্থ কন্টেনার তৈরি করে, যা দৃশ্যক্ষেত্রের সম্পূর্ণ প্রস্থতা দেয়

স্থির কন্টেনার

ব্যবহার করে .container শ্রেণী একটি প্রতিক্রিয় স্থির প্রস্থতা কন্টেনার তৈরি করে

লক্ষ্য করুন, তার প্রস্থতা (max-width): বিভিন্ন স্ক্রোল প্যানেল প্রস্থতায় পরিবর্তিত হয়:

অতিরিক্ত ছোট
<576px 		ছোট
≥576px 		মাঝারি
≥768px 		বড়
≥992px 		এক্সট্রা লার্জ
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

নিচের উদাহরণটি খুলুন এবং ব্রাউজার উইন্ডোর মাপ পরিবর্তন করুন এবং কন্টেনার প্রস্থতা বিভিন্ন বিভাজকে দেখুন:

উদাহরণ

<div class="container">
  <h1>আমার প্রথমটি Bootstrap পাতা</h1>
  <p>এটি কিছু লেখা।</p>
</div>

আপনার নিজেই চেষ্টা করুন

XXL বিভাজক (≥1400px) Bootstrap 5-এ নতুনভাবে যুক্ত করা হয়েছে, এবং Bootstrap 4-এ সবচেয়ে বড় বিভাজক Extra large (≥1200px)।

প্রবাহী কন্টেনার

ব্যবহার করে .container-fluid শ্রেণী একটি সম্পূর্ণ প্রস্থ কন্টেনার তৈরি করে, যা সর্বদা সম্পূর্ণ স্ক্রোল প্যানেল প্রস্থতা (width সর্বদা 100%）：

উদাহরণ

<div class="container-fluid">
  <h1>আমার প্রথমটি Bootstrap পাতা</h1>
  <p>এটি কিছু লেখা।</p>
</div>

আপনার নিজেই চেষ্টা করুন

কন্টেনার পূর্ণতা

ডিফল্টে, কন্টেনারটি ডান-বাম পূর্ণতা (ডান-বাম অভ্যন্তরীণ ঘাটলা) রয়েছে, শীর্ষ এবং নিচের পূর্ণতা (উপর-নীচের অভ্যন্তরীণ ঘাটলা) নেই। তাই, আমরা সাধারণত স্পেসিং টুল（সুবিধা），যেমন অতিরিক্ত পূর্ণতা এবং মাঝারি ঘাটলা এবং তাদের ভালো দেখানোর জন্য.pt-5 এর অর্থ "একটি বড়শীর্ষভাগ পূর্ণ：

উদাহরণ

<div class="container pt-5"></div>

আপনার নিজেই চেষ্টা করুন

কনটেন্টার সীমানা এবং রঙ

অন্যান্য টুল, যেমন সীমানা এবং রঙ, প্রায়শই কনটেন্টারের সাথে ব্যবহৃত হয়:

উদাহরণ

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

আপনার নিজেই চেষ্টা করুন

আপনি পরবর্তী চপ্তবিধিতে রঙ এবং সীমানা টুলস সম্পর্কে আরও একটি বেশি কিছু শিখবেন。

রেসপনসিভ কনটেন্টার

আপনি আরও .container-sm|md|lg|xl শ্রেণী দ্বারা নির্ধারণ করা হবে যখন কনটেন্টারটি প্রতিক্রিয়ামুখী হবে。

কনটেন্টার max-width বিভিন্ন স্ক্রিন মাপ/ভিউপোর্টে পরিবর্তিত হবে:

শ্রেণী অতিরিক্ত ছোট
<576px		 ছোট
≥576px		 মাঝারি
≥768px		 বড়
≥992px		 অতিরিক্ত বড়
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

উদাহরণ

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

আপনার নিজেই চেষ্টা করুন