বুটস্ট্রাপ ৫ এ Utilities এবং Flexbox দুটি অত্যন্ত শক্তিশালী ফিচার, যা ওয়েব ডিজাইনের জন্য ব্যবহৃত হয়। Utilities ছোট ছোট, কিন্তু গুরুত্বপূর্ণ ক্লাস প্রদান করে, যেগুলি বিভিন্ন স্টাইলিং, পজিশনিং এবং রেস্পন্সিভ ডিজাইন তৈরি করতে সাহায্য করে। Flexbox এর মাধ্যমে আপনি কন্টেন্টের অবস্থান এবং লেআউট অত্যন্ত সহজে নিয়ন্ত্রণ করতে পারেন, যাতে রেস্পন্সিভ ওয়েব ডিজাইন তৈরি করা সহজ হয়।

Utilities

Utilities বুটস্ট্র্যাপে এমন একাধিক প্রস্তুত ক্লাস যা এক্সট্রা CSS কোড লিখে ছাড়াই বিভিন্ন স্টাইল অ্যাপ্লাই করতে সাহায্য করে। এটি সাধারণত মার্জিন, প্যাডিং, টেক্সট-অ্যালাইনমেন্ট, ব্যাকগ্রাউন্ড কালার, টেক্সট কালার, ডিসপ্লে টাইপ, এবং আরও অনেক স্টাইলের জন্য ব্যবহৃত হয়।

সাধারণ Utilities উদাহরণ:

1. Text Alignment:

   <p class="text-center">এই টেক্সটটি সেন্টারে অবস্থান করবে।</p>
   <p class="text-end">এই টেক্সটটি রাইট সাইডে থাকবে।</p>
   

2. Margin এবং Padding:

   <div class="m-3">এটি ৩ ইউনিট মার্জিন সহ একটি ডিভ হবে।</div>
   <div class="p-4">এটি ৪ ইউনিট প্যাডিং সহ একটি ডিভ হবে।</div>
   

3. Background এবং Text Color:

   <div class="bg-primary text-white">এই ডিভটির ব্যাকগ্রাউন্ড প্রাইমারি এবং টেক্সট সাদা হবে।</div>
   

4. Display and Visibility:

   <div class="d-none">এই ডিভটি হিডেন থাকবে।</div>
   <div class="d-block">এই ডিভটি শো করবে।</div>
   

5. Border:

   <div class="border">এই ডিভটির চারপাশে বর্ডার থাকবে।</div>
   

বুটস্ট্র্যাপে Utilities ক্লাস ব্যবহার করে আপনি দ্রুত ওয়েব পেজের উপাদানগুলির স্টাইল পরিবর্তন করতে পারেন, যাতে সময় বাঁচে এবং কোড সহজ হয়।

Flexbox

Flexbox একটি লেআউট মডেল যা এলিমেন্টগুলির মধ্যে স্পেস ডিসট্রিবিউশন এবং অ্যালাইনমেন্ট খুবই সহজভাবে পরিচালনা করতে সাহায্য করে। বুটস্ট্র্যাপ ৫ এ Flexbox ফিচার দিয়ে আপনি কন্টেন্টকে অনুভূমিক এবং 수직ভাবে সাজাতে পারেন।

Flexbox ব্যবহার করার জন্য d-flex ক্লাসটি ব্যবহার করতে হয়, এবং এরপর আপনি বিভিন্ন ক্লাস ব্যবহার করে কন্টেন্টের পজিশন এবং অ্যালাইনমেন্ট কন্ট্রোল করতে পারেন।

Flexbox উদাহরণ:

1. Basic Flexbox Layout:

   <div class="d-flex">
       <div class="p-2">এলিমেন্ট ১</div>
       <div class="p-2">এলিমেন্ট ২</div>
       <div class="p-2">এলিমেন্ট ৩</div>
   </div>
   

   এখানে d-flex ক্লাস এলিমেন্টগুলোকে flex কন্টেইনারে পরিণত করে এবং p-2 ক্লাস প্যাডিং অ্যাপ্লাই করে।

2. Flex Direction (Row এবং Column):

   • Row (ডিফল্ট):

     <div class="d-flex flex-row">
         <div class="p-2">এলিমেন্ট ১</div>
         <div class="p-2">এলিমেন্ট ২</div>
         <div class="p-2">এলিমেন্ট ৩</div>
     </div>
     

   • Column:

     <div class="d-flex flex-column">
         <div class="p-2">এলিমেন্ট ১</div>
         <div class="p-2">এলিমেন্ট ২</div>
         <div class="p-2">এলিমেন্ট ৩</div>
     </div>
     

3. Align Items (Centering Items): align-items-center ক্লাস ব্যবহার করে আপনি ফ্লেক্স কন্টেইনারের ভেতর এলিমেন্টগুলোকে 수직ভাবে সেন্টার করতে পারেন।

   <div class="d-flex align-items-center" style="height: 200px;">
       <div class="p-2">এলিমেন্ট সেন্টারড</div>
   </div>
   

4. Justify Content (Horizontal Alignment):

   • Center:

     <div class="d-flex justify-content-center">
         <div class="p-2">এলিমেন্ট ১</div>
         <div class="p-2">এলিমেন্ট ২</div>
     </div>
     

   • Space Between (Items spread out):

     <div class="d-flex justify-content-between">
         <div class="p-2">এলিমেন্ট ১</div>
         <div class="p-2">এলিমেন্ট ২</div>
     </div>
     

5. Wrap Items: আপনি যদি চান যে এলিমেন্টগুলো একটি লাইনে না এসে, নীচে চলে যায়, তাহলে flex-wrap ক্লাস ব্যবহার করতে পারেন:

   <div class="d-flex flex-wrap">
       <div class="p-2">এলিমেন্ট ১</div>
       <div class="p-2">এলিমেন্ট ২</div>
       <div class="p-2">এলিমেন্ট ৩</div>
   </div>
   

সারাংশ

• Utilities ক্লাসগুলো বুটস্ট্র্যাপে দ্রুত স্টাইল পরিবর্তনের জন্য ব্যবহৃত হয়। এতে মার্জিন, প্যাডিং, ব্যাকগ্রাউন্ড, টেক্সট রঙ ইত্যাদি সহ বিভিন্ন সাধারণ স্টাইলিং করা যায়।
• Flexbox কন্টেইনারের ভেতর এলিমেন্টগুলোর অবস্থান এবং অ্যালাইনমেন্ট খুবই সহজে কন্ট্রোল করতে সাহায্য করে। এর মাধ্যমে ওয়েব ডিজাইন অনেক বেশি রেস্পন্সিভ এবং ইউজার-বান্ধব হয়।

এই দুটি ফিচারকে সঠিকভাবে ব্যবহার করে আপনি যে কোন লেআউট ডিজাইনকে দ্রুত এবং কার্যকরীভাবে তৈরি করতে পারবেন।

Utility Classes বুটস্ট্র্যাপে ছোট ছোট CSS ক্লাস যা দ্রুত এবং সহজভাবে উপাদানগুলোর স্টাইল কাস্টমাইজ করতে সাহায্য করে। এগুলি বিভিন্ন CSS প্রপার্টি যেমন প্যাডিং, মার্জিন, টেক্সট অ্যালাইনমেন্ট, ডিসপ্লে, বর্ডার, এবং অন্যান্য সাধারণ স্টাইল প্রোপার্টির জন্য ব্যবহৃত হয়। এই ক্লাসগুলি ব্যবহারের মাধ্যমে আপনি কোন CSS কোড লিখে ছাড়াই উপাদানগুলোর স্টাইল দ্রুত পরিবর্তন করতে পারবেন।

Utility Classes এর কিছু প্রধান শ্রেণী:

1. Spacing Utilities
   স্পেসিং ইউটিলিটি ক্লাসগুলি টেক্সট, এলিমেন্ট অথবা কনটেইনারের মধ্যে মার্জিন (margin) এবং প্যাডিং (padding) কন্ট্রোল করতে ব্যবহৃত হয়।

   • Margin Classes
     মার্জিন পরিবর্তন করতে m, mt, mb, ml, mr, mx, এবং my ব্যবহার করা হয়।

     <div class="m-3">এটি ৩ ইউনিট মার্জিন থাকবে</div>
     <div class="mt-5">এটি উপরের দিকে ৫ ইউনিট মার্জিন থাকবে</div>
     <div class="mb-2">এটি নিচের দিকে ২ ইউনিট মার্জিন থাকবে</div>
     <div class="ml-4">এটি বাম পাশে ৪ ইউনিট মার্জিন থাকবে</div>
     <div class="mr-3">এটি ডান পাশে ৩ ইউনিট মার্জিন থাকবে</div>
     <div class="mx-1">এটি বাম এবং ডান পাশে ১ ইউনিট মার্জিন থাকবে</div>
     <div class="my-2">এটি উপরের এবং নিচের দিকে ২ ইউনিট মার্জিন থাকবে</div>
     

   • Padding Classes
     প্যাডিং পরিবর্তন করতে p, pt, pb, pl, pr, px, এবং py ব্যবহার করা হয়।

     <div class="p-4">এটি সবদিকে ৪ ইউনিট প্যাডিং থাকবে</div>
     <div class="pt-3">এটি উপরের দিকে ৩ ইউনিট প্যাডিং থাকবে</div>
     <div class="pb-2">এটি নিচের দিকে ২ ইউনিট প্যাডিং থাকবে</div>
     <div class="pl-4">এটি বাম পাশে ৪ ইউনিট প্যাডিং থাকবে</div>
     <div class="pr-1">এটি ডান পাশে ১ ইউনিট প্যাডিং থাকবে</div>
     <div class="px-2">এটি বাম এবং ডান পাশে ২ ইউনিট প্যাডিং থাকবে</div>
     <div class="py-5">এটি উপরের এবং নিচের দিকে ৫ ইউনিট প্যাডিং থাকবে</div>
     

2. Text Utilities
   টেক্সট স্টাইল পরিবর্তন করতে বিভিন্ন ক্লাস ব্যবহার করা যায় যেমন টেক্সট সেন্টার, রাইট অথবা লেফট এ্যালাইনমেন্ট, টেক্সট কালার ইত্যাদি।

   • Text Alignment

     <p class="text-center">এই টেক্সটটি সেন্টারে থাকবে।</p>
     <p class="text-end">এই টেক্সটটি ডান দিকে থাকবে।</p>
     <p class="text-start">এই টেক্সটটি বাম দিকে থাকবে।</p>
     

   • Text Color
     টেক্সটের রঙ পরিবর্তন করতে text-primary, text-secondary, text-success, text-danger ক্লাস ব্যবহার করা হয়।

     <p class="text-primary">এই টেক্সটের রঙ প্রাইমারি হবে।</p>
     <p class="text-danger">এই টেক্সটের রঙ রেড হবে।</p>
     <p class="text-success">এই টেক্সটের রঙ গ্রীন হবে।</p>
     

   • Text Transform
     টেক্সটের ক্যাপিটালাইজেশন পরিবর্তন করতে text-uppercase, text-lowercase, এবং text-capitalize ব্যবহার করা হয়।

     <p class="text-uppercase">এই টেক্সটটি বড় অক্ষরে হবে।</p>
     <p class="text-lowercase">এই টেক্সটটি ছোট অক্ষরে হবে।</p>
     <p class="text-capitalize">এই টেক্সটের প্রথম অক্ষর বড় হবে।</p>
     

3. Display Utilities
   এলিমেন্টের ডিসপ্লে প্রপার্টি কন্ট্রোল করতে ব্যবহৃত হয়। এই ক্লাসগুলি এলিমেন্টের ভিজ্যুয়াল প্রদর্শন কন্ট্রোল করে (যেমন none, block, inline, flex ইত্যাদি)।

   • Display Property:

     <div class="d-none">এই ডিভটি হিডেন থাকবে</div>
     <div class="d-block">এই ডিভটি ব্লক এলিমেন্ট হবে</div>
     <div class="d-flex">এই ডিভটি ফ্লেক্স কন্টেইনার হবে</div>
     

4. Flexbox Utilities
   Flexbox দিয়ে কন্টেইনারের মধ্যে এলিমেন্টগুলির alignment এবং distribution সহজভাবে করা যায়। বুটস্ট্র্যাপ ৫ এ ফ্লেক্স-বক্স এর কিছু প্রধান ক্লাস হলো d-flex, justify-content-*, align-items-*, flex-column, ইত্যাদি।

   • Flex Direction

     <div class="d-flex flex-row">
         <div class="p-2">এলিমেন্ট ১</div>
         <div class="p-2">এলিমেন্ট ২</div>
     </div>
     <div class="d-flex flex-column">
         <div class="p-2">এলিমেন্ট ১</div>
         <div class="p-2">এলিমেন্ট ২</div>
     </div>
     

   • Align Items and Justify Content:

     <div class="d-flex justify-content-center align-items-center" style="height: 200px;">
         <div>এলিমেন্ট সেন্টারে হবে</div>
     </div>
     

5. Borders and Rounded Utilities
   টেবিল, ডিভ, বা অন্যান্য এলিমেন্টে বর্ডার এবং রাউন্ডেড কর্নার অ্যাপ্লাই করতে border, border-radius ইত্যাদি ক্লাস ব্যবহার করা হয়।

   • Borders

     <div class="border">এটি একটি বর্ডার সহ ডিভ হবে।</div>
     

   • Rounded Corners

     <div class="rounded">এটি রাউন্ডেড কর্নার সহ হবে।</div>
     <div class="rounded-circle">এটি একটি গোলাকার ডিভ হবে।</div>
     <div class="rounded-0">এটি কোন রাউন্ডেড কর্নার থাকবে না।</div>
     

Conclusion

বুটস্ট্র্যাপ ৫ এর Utility Classes এর মাধ্যমে আপনি খুব সহজেই দ্রুত এবং কার্যকরভাবে উপাদানগুলোর স্টাইল কাস্টমাইজ করতে পারেন। এটি বিশেষভাবে ব্যবহারিক, কারণ এতে কম কোড লেখা হয় এবং দ্রুত ডিজাইন পরিবর্তন সম্ভব হয়।

ফ্লেক্সবক্স (Flexbox) হল একটি CSS লেআউট মডেল, যা ডাইনামিক ও ফ্লেক্সিবল লেআউট ডিজাইন তৈরি করতে ব্যবহৃত হয়। এটি আপনাকে উপাদানগুলোর সাইজ, স্থান এবং অ্যালাইনমেন্ট খুব সহজে নিয়ন্ত্রণ করতে দেয়, বিশেষ করে একাধিক উপাদানকে একসাথে লাইন, কলাম বা গ্রিড আকারে সাজাতে।

বুটস্ট্রাপ ৫ এর ফ্লেক্সবক্স ক্লাসগুলো ব্যবহার করে দ্রুত এবং সহজে ফ্লেক্সবক্স লেআউট তৈরি করা যায়। এখানে আমরা ফ্লেক্সবক্সের মূল ধারণা এবং বুটস্ট্রাপ ৫ এর সাথে এটি কিভাবে ব্যবহার করা যায় তা দেখবো।

ফ্লেক্সবক্সের মৌলিক ধারণা

ফ্লেক্সবক্সের মধ্যে মূলত দুটি জিনিস থাকে:

1. ফ্লেক্স কন্টেইনার (Flex Container): এটি সেই কন্টেইনার, যা ফ্লেক্স আইটেমগুলোর প্যারেন্ট (অভিভাবক)। ফ্লেক্স কন্টেইনারকে display: flex বা display: inline-flex দিয়ে চিহ্নিত করা হয়।
2. ফ্লেক্স আইটেম (Flex Items): ফ্লেক্স কন্টেইনারের মধ্যে থাকা উপাদানগুলো। এগুলো স্বয়ংক্রিয়ভাবে কন্টেইনারের মধ্যে জায়গা নিয়ে সাজানো হয়।

বুটস্ট্র্যাপ ৫ এ ফ্লেক্সবক্স ব্যবহার

বুটস্ট্র্যাপ ৫ অনেকগুলো ফ্লেক্সবক্স ক্লাস সরবরাহ করে যা আপনার কাজকে সহজ করে তোলে। এই ক্লাসগুলো ব্যবহার করে আপনি বিভিন্ন লেআউট, যেমন গ্রিড, সেন্টারিং, সাইজিং ইত্যাদি তৈরি করতে পারেন।

উদাহরণ ১: ফ্লেক্স কন্টেইনার তৈরি করা

এখানে একটি সাধারণ ফ্লেক্স কন্টেইনার এবং এর মধ্যে কয়েকটি ফ্লেক্স আইটেম তৈরি করা হয়েছে।

<div class="container mt-5">
  <div class="d-flex">
    <div class="p-2">আইটেম ১</div>
    <div class="p-2">আইটেম ২</div>
    <div class="p-2">আইটেম ৩</div>
  </div>
</div>

এখানে:

• d-flex: এই ক্লাসটি কন্টেইনারকে ফ্লেক্স কন্টেইনারে পরিণত করে।
• p-2: এই ক্লাসটি আইটেমগুলোর মধ্যে কিছু প্যাডিং (স্পেসিং) যোগ করে।

ফ্লেক্স আইটেমগুলো এখন কন্টেইনারের মধ্যে একটি লাইন হিসেবে থাকবে। ফ্লেক্স কন্টেইনার স্বয়ংক্রিয়ভাবে আইটেমগুলোকে একে অপরের পাশে সাজায়।

উদাহরণ ২: ফ্লেক্স আইটেমের সাইজ নিয়ন্ত্রণ

ফ্লেক্সবক্স আপনাকে আইটেমগুলোর সাইজ নিয়ন্ত্রণ করার জন্য flex ক্লাসটি ব্যবহার করতে দেয়। এটি আইটেমের প্রশস্ততা এবং সাইজ নিয়ন্ত্রণ করে।

<div class="container mt-5">
  <div class="d-flex">
    <div class="p-2 flex-fill">আইটেম ১</div>
    <div class="p-2 flex-fill">আইটেম ২</div>
    <div class="p-2 flex-fill">আইটেম ৩</div>
  </div>
</div>

এখানে:

• flex-fill: এই ক্লাসটি ফ্লেক্স আইটেমকে কন্টেইনারের পূর্ণ প্রশস্ততা পূর্ণ করতে বলে।

এইভাবে, প্রতিটি আইটেম কন্টেইনারের সমান অংশে প্রসারিত হবে।

উদাহরণ ৩: ফ্লেক্স আইটেম সেন্টারিং

ফ্লেক্সবক্সের সবচেয়ে শক্তিশালী বৈশিষ্ট্যগুলির মধ্যে একটি হল উপাদানগুলোকে সহজে সেন্টার করা। আপনি justify-content এবং align-items প্রোপার্টির মাধ্যমে উপাদানগুলিকে সেন্টার করতে পারেন।

<div class="container mt-5">
  <div class="d-flex justify-content-center align-items-center" style="height: 200px;">
    <div class="p-2">সেন্টার করা আইটেম</div>
  </div>
</div>

এখানে:

• justify-content-center: এই ক্লাসটি ফ্লেক্স কন্টেইনারের অনুভূমিক (horizontal) সেন্টারিং করে।
• align-items-center: এই ক্লাসটি ফ্লেক্স কন্টেইনারের উল্লম্ব (vertical) সেন্টারিং করে।
• height: 200px;: কন্টেইনারে উচ্চতা দেওয়া হয়েছে যাতে সেন্টারিং দৃশ্যমান হয়।

এভাবে, আইটেমটি কন্টেইনারের মাঝখানে সেন্টার হবে।

উদাহরণ ৪: ফ্লেক্স রিভার্স অর্ডার

ফ্লেক্স আইটেমগুলো কখনো কখনো রিভার্স অর্ডারে সাজানো প্রয়োজন হতে পারে। আপনি flex-row-reverse বা flex-column-reverse ক্লাস ব্যবহার করে এটি করতে পারেন।

<div class="container mt-5">
  <div class="d-flex flex-row-reverse">
    <div class="p-2">আইটেম ১</div>
    <div class="p-2">আইটেম ২</div>
    <div class="p-2">আইটেম ৩</div>
  </div>
</div>

এখানে:

• flex-row-reverse: এই ক্লাসটি ফ্লেক্স আইটেমগুলোকে উল্টো অর্ডারে সাজিয়ে দেবে, অর্থাৎ আইটেম ৩ প্রথমে, আইটেম ২ পরে এবং আইটেম ১ শেষ হবে।

উদাহরণ ৫: ফ্লেক্স কন্টেইনারে স্পেস বন্টন

ফ্লেক্স কন্টেইনারের মধ্যে স্পেস বন্টনের জন্য justify-content ক্লাস ব্যবহার করা যেতে পারে, যেমন justify-content-between, justify-content-around ইত্যাদি।

<div class="container mt-5">
  <div class="d-flex justify-content-between">
    <div class="p-2">আইটেম ১</div>
    <div class="p-2">আইটেম ২</div>
    <div class="p-2">আইটেম ৩</div>
  </div>
</div>

এখানে:

• justify-content-between: এই ক্লাসটি ফ্লেক্স আইটেমগুলোর মধ্যে সমান স্পেস রেখে আইটেমগুলোকে শুরু ও শেষে সাজিয়ে দেয়।

সারাংশ

ফ্লেক্সবক্স CSS লেআউট মডেলটি একটি অত্যন্ত শক্তিশালী টুল যা সোজাসুজি উপাদানগুলোকে খুব সহজে এবং কার্যকরভাবে সাজানোর সুযোগ দেয়। বুটস্ট্রাপ ৫ এর ফ্লেক্স ক্লাসগুলো আপনাকে এই শক্তিশালী লেআউট কৌশলটি খুব দ্রুত এবং কার্যকরভাবে প্রয়োগ করতে সাহায্য করে।

বুটস্ট্রাপ ৫ এ স্পেসিং, পজিশনিং, এবং অ্যালাইনমেন্ট এর জন্য বেশ কিছু ইউটিলিটি ক্লাস প্রদান করা হয়, যা CSS প্রপার্টি অ্যাপ্লাই করার প্রক্রিয়াকে দ্রুত এবং সহজ করে তোলে। এই ইউটিলিটিগুলির মাধ্যমে আপনি সহজেই ওয়েব পেজের বিভিন্ন উপাদানকে স্পেসিং, পজিশনিং এবং অ্যালাইনমেন্টের দিক দিয়ে কাস্টমাইজ করতে পারেন।

এখানে স্পেসিং, পজিশনিং, এবং অ্যালাইনমেন্ট ইউটিলিটিজ এর ব্যবহারের কিছু উদাহরণ দেওয়া হচ্ছে।

স্পেসিং (Spacing)

স্পেসিং ক্লাসগুলি margin এবং padding এর জন্য ব্যবহার করা হয়। এটি উপাদানের মধ্যে জায়গা (spacer) যোগ করতে সাহায্য করে। বুটস্ট্রাপ ৫ এ আপনি m (margin), p (padding), mt (margin-top), mb (margin-bottom), ml (margin-left), mr (margin-right), pt (padding-top), pb (padding-bottom), pl (padding-left), pr (padding-right) ইত্যাদি ক্লাস ব্যবহার করতে পারেন।

উদাহরণ: স্পেসিং ইউটিলিটিজ

<div class="mt-5">
  <p>এটি মার্জিন টপ ৫ ব্যবহার করে উপরের দিকে জায়গা তৈরি করেছে।</p>
</div>

<div class="mb-3">
  <p>এটি মার্জিন বটম ৩ ব্যবহার করে নিচের দিকে জায়গা তৈরি করেছে।</p>
</div>

<div class="pt-4 pb-4">
  <p>এটি প্যাডিং টপ ৪ এবং প্যাডিং বটম ৪ ব্যবহার করে উপরের এবং নিচের দিকে জায়গা তৈরি করেছে।</p>
</div>

<div class="p-3">
  <p>এটি সবদিক থেকে প্যাডিং ৩ ব্যবহার করে সবার কাছেই জায়গা দিয়েছে।</p>
</div>

• m-: মার্জিন (margin) অ্যাপ্লাই করতে ব্যবহৃত হয়।
• p-: প্যাডিং (padding) অ্যাপ্লাই করতে ব্যবহৃত হয়।
• mt-: মার্জিন টপ (margin-top)।
• mb-: মার্জিন বটম (margin-bottom)।
• ml-: মার্জিন লেফট (margin-left)।
• mr-: মার্জিন রাইট (margin-right)।
• pt-: প্যাডিং টপ (padding-top)।
• pb-: প্যাডিং বটম (padding-bottom)।

1 থেকে 5 পর্যন্ত মান ব্যবহার করা যায়, যেখানে 1 হলো সর্বনিম্ন স্পেস এবং 5 হলো সর্বোচ্চ স্পেস।

পজিশনিং (Positioning)

বুটস্ট্রাপ ৫ এ পজিশনিং ইউটিলিটি ক্লাসের মাধ্যমে আপনি উপাদানগুলোকে নির্দিষ্ট অবস্থানে রাখতে পারেন। এটি relative, absolute, fixed, sticky ইত্যাদি পজিশনিং পদ্ধতি সমর্থন করে। এছাড়া, top, right, bottom, এবং left প্রপার্টি ব্যবহার করেও উপাদানকে পজিশন করা যায়।

উদাহরণ: পজিশনিং ইউটিলিটিজ

<div class="position-relative">
  <p>এটি একটি রিলেটিভ পজিশনে রয়েছে।</p>
</div>

<div class="position-absolute top-50 start-50 translate-middle">
  <p>এটি অ্যাবসলিউট পজিশনে এবং ৫০% উপরে এবং ৫০% বামে অবস্থান করছে।</p>
</div>

<div class="position-fixed bottom-0 end-0 p-3">
  <p>এটি ফিক্সড পজিশনে এবং নিচে ডান দিকে অবস্থান করছে।</p>
</div>

<div class="position-sticky top-0">
  <p>এটি একটি স্টিকি পজিশনে রয়েছে, স্ক্রল করার পরও টপে থাকবে।</p>
</div>

• position-relative: রিলেটিভ পজিশন (relative position) সেট করে।
• position-absolute: অ্যাবসলিউট পজিশন (absolute position) সেট করে।
• position-fixed: ফিক্সড পজিশন (fixed position) সেট করে।
• position-sticky: স্টিকি পজিশন (sticky position) সেট করে, যা স্ক্রল করার সময় টপে আটকে থাকে।
• top-0, bottom-0, left-0, right-0: এগুলো উপাদানকে নির্দিষ্ট পজিশনে স্থাপন করে।
• start-50, end-50: উপাদানকে ৫০% পজিশনে নিয়ে আসে (ডান বা বাম দিকে)।
• translate-middle: উপাদানকে সেন্টার করতে ব্যবহৃত হয় (মাঝখানে আনার জন্য)।

অ্যালাইনমেন্ট (Alignment)

বুটস্ট্রাপ ৫ এ অ্যালাইনমেন্ট ইউটিলিটিজ ব্যবহার করে আপনি উপাদানগুলোকে অনুভূমিক এবং 수직ভাবে কেন্দ্রিত বা সমানভাবে সাজাতে পারেন। এই ইউটিলিটি ক্লাসগুলি flexbox এবং grid system এর ওপর ভিত্তি করে কাজ করে।

উদাহরণ: অ্যালাইনমেন্ট ইউটিলিটিজ

<div class="d-flex justify-content-center">
  <p>এটি অনুভূমিকভাবে কেন্দ্রীভূত প্যারাগ্রাফ।</p>
</div>

<div class="d-flex justify-content-between">
  <p>এটি দুটি উপাদানকে একে অপরের মধ্যে সমানভাবে বিতরণ করবে।</p>
</div>

<div class="d-flex align-items-center" style="height: 200px;">
  <p>এটি 수직ভাবে কেন্দ্রীভূত প্যারাগ্রাফ।</p>
</div>

<div class="d-grid gap-3">
  <div class="p-3 border bg-light">গ্রীড উপাদান ১</div>
  <div class="p-3 border bg-light">গ্রীড উপাদান ২</div>
  <div class="p-3 border bg-light">গ্রীড উপাদান ৩</div>
</div>

• d-flex: ফ্লেক্স কন্টেইনার তৈরি করে, যা ফ্লেক্সবক্স লেআউটকে সক্ষম করে।
• justify-content-center: অনুভূমিকভাবে কন্টেন্টকে কেন্দ্র করে।
• justify-content-between: উপাদানগুলিকে একে অপরের মধ্যে সমানভাবে বিতরণ করে।
• align-items-center: উপাদানগুলিকে 수직ভাবে কেন্দ্রীভূত করে।
• d-grid: গ্রিড লেআউট তৈরি করে।
• gap-3: গ্রিড উপাদানগুলোর মধ্যে গ্যাপ যোগ করে।

সারাংশ

বুটস্ট্রাপ ৫ এর স্পেসিং, পজিশনিং এবং অ্যালাইনমেন্ট ইউটিলিটিগুলি ওয়েব ডেভেলপমেন্টকে আরও দ্রুত এবং সহজ করে তোলে। এই ইউটিলিটি ক্লাসগুলি ব্যবহার করে আপনি উপাদানগুলোকে খুব সহজেই সাজাতে এবং কাস্টমাইজ করতে পারেন। Flexbox এবং Grid সিস্টেমের সাহায্যে আপনি সহজেই উপাদানগুলির অবস্থান, আকার এবং অ্যালাইনমেন্ট কন্ট্রোল করতে পারবেন।

ফ্লেক্সবক্স (Flexbox) একটি শক্তিশালী CSS লেআউট মডেল যা উপাদানগুলিকে আরও কার্যকরভাবে এবং নমনীয়ভাবে সাজানোর জন্য ব্যবহৃত হয়। এটি বিশেষত রেসপন্সিভ ডিজাইন তৈরির জন্য খুবই উপকারী, কারণ এটি বিভিন্ন স্ক্রীন সাইজে উপাদানগুলিকে স্বয়ংক্রিয়ভাবে সজ্জিত ও ফিট করার সুবিধা দেয়। বুটস্ট্রাপ ৫-এ ফ্লেক্সবক্স ব্যবহারের মাধ্যমে, আপনি খুব সহজে উপাদানগুলির লেআউট এবং তাদের আচরণ কনফিগার করতে পারেন।

ফ্লেক্সবক্স ব্যবহার করে, আপনি মূলত উপাদানগুলির মধ্যে স্থান ভাগ করতে পারেন, তাদের কন্টেইনারের মধ্যে সঠিকভাবে সাজাতে পারেন, এবং তাদের মাপ পরিবর্তন করতে পারেন স্ক্রীন সাইজ অনুযায়ী।

ফ্লেক্সবক্স কন্টেইনার এবং আইটেম

1. display: flex;: এটি কন্টেইনারের জন্য প্রধান CSS প্রপার্টি যা কন্টেইনারের সরবরাহকারী উপাদানগুলোকে ফ্লেক্স আইটেমে পরিণত করে।
2. flex-direction: এটি নির্দেশ করে উপাদানগুলো কিভাবে সাজানো হবে — অনুভূমিক (row) বা উল্লম্ব (column)।
3. justify-content: এটি কন্টেইনারের মধ্যে উপাদানগুলোকে অনুভূমিকভাবে সাজানোর জন্য ব্যবহৃত হয়।
4. align-items: এটি উপাদানগুলোকে উল্লম্বভাবে সজ্জিত করে।

উদাহরণ: ফ্লেক্সবক্স ব্যবহার করে রেসপন্সিভ ডিজাইন তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Responsive Design Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <!-- Flexbox Container -->
    <div class="d-flex flex-wrap justify-content-between">
      <!-- Flexbox Item 1 -->
      <div class="flex-item bg-light p-3 mb-3" style="width: 30%;">
        <h5>Item 1</h5>
        <p>This is the first item.</p>
      </div>
      <!-- Flexbox Item 2 -->
      <div class="flex-item bg-light p-3 mb-3" style="width: 30%;">
        <h5>Item 2</h5>
        <p>This is the second item.</p>
      </div>
      <!-- Flexbox Item 3 -->
      <div class="flex-item bg-light p-3 mb-3" style="width: 30%;">
        <h5>Item 3</h5>
        <p>This is the third item.</p>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

ব্যাখ্যা:

• d-flex: এটি বুটস্ট্র্যাপ ৫-এ একটি ক্লাস যা কন্টেইনারকে ফ্লেক্স কন্টেইনারে পরিণত করে। এর মাধ্যমে আপনি ফ্লেক্সবক্স লেআউট ব্যবহার করতে পারবেন।
• flex-wrap: এই ক্লাসটি উপাদানগুলোকে একাধিক লাইনে ভাঙতে সাহায্য করে। যদি স্ক্রীন ছোট হয়, তবে উপাদানগুলো নতুন লাইনে চলে যাবে।
• justify-content-between: এই ক্লাসটি উপাদানগুলোর মধ্যে স্থান ভাগ করে দেয় এবং তাদেরকে কন্টেইনারের মধ্যে সমানভাবে সাজিয়ে দেয়।
• style="width: 30%;": প্রতিটি আইটেমের জন্য প্রস্থ নির্ধারণ করা হয়েছে যাতে তারা এক লাইনে ৩টি করে উপাদান রাখে।

ফ্লেক্সবক্সের মাধ্যমে রেসপন্সিভ আচরণ কনফিগার করা

ফ্লেক্সবক্সের সবচেয়ে শক্তিশালী দিক হল, এটি খুব সহজে রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করে। বুটস্ট্র্যাপ ৫-এর মাধ্যমে ফ্লেক্সবক্সের সাথে বিভিন্ন ব্রেকপয়েন্ট ব্যবহার করে উপাদানগুলির আচরণ কাস্টমাইজ করা যায়।

উদাহরণ: রেসপন্সিভ ফ্লেক্সবক্স

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Flexbox Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <!-- Flexbox Container -->
    <div class="d-flex flex-wrap justify-content-between">
      <!-- Flexbox Item 1 -->
      <div class="flex-item bg-light p-3 mb-3 col-12 col-md-6 col-lg-4">
        <h5>Item 1</h5>
        <p>This is the first item.</p>
      </div>
      <!-- Flexbox Item 2 -->
      <div class="flex-item bg-light p-3 mb-3 col-12 col-md-6 col-lg-4">
        <h5>Item 2</h5>
        <p>This is the second item.</p>
      </div>
      <!-- Flexbox Item 3 -->
      <div class="flex-item bg-light p-3 mb-3 col-12 col-md-6 col-lg-4">
        <h5>Item 3</h5>
        <p>This is the third item.</p>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

ব্যাখ্যা:

• col-12: ছোট স্ক্রীনে (যেমন মোবাইল) প্রতিটি আইটেম ১২টি কলাম নিয়ে পুরো লাইন জুড়ে থাকবে।
• col-md-6: মিডিয়াম স্ক্রীনে (ট্যাবলেট) প্রতিটি আইটেম ৬টি কলাম নিয়ে আধা লাইন জুড়ে থাকবে।
• col-lg-4: বড় স্ক্রীনে (ডেস্কটপ) প্রতিটি আইটেম ৪টি কলাম নিয়ে এক লাইনে ৩টি আইটেম সাজাবে।

ফ্লেক্সবক্সের কিছু গুরুত্বপূর্ণ প্রপার্টি:

1. flex-direction: উপাদানগুলির অর্ডার নির্ধারণ করে (row, column, row-reverse, column-reverse)।
2. justify-content: অনুভূমিকভাবে উপাদানগুলোকে সাজানোর জন্য।
   • flex-start: শুরুতে সাজানো
   • center: মাঝখানে সাজানো
   • space-between: উপাদানগুলোর মাঝে সমান ফাঁকা জায়গা
3. align-items: উল্লম্বভাবে উপাদানগুলোকে সাজানোর জন্য।
   • flex-start: উপরের দিকে
   • center: মাঝখানে
   • stretch: পুরো উচ্চতা নিয়ে

ফ্লেক্সবক্সের সাহায্যে আপনি সহজেই রেসপন্সিভ লেআউট তৈরি করতে পারবেন এবং বুটস্ট্রাপ ৫ এর বিভিন্ন ফ্লেক্সবক্স ক্লাস ব্যবহার করে আপনার ডিজাইনকে আরও নমনীয় এবং কাস্টমাইজযোগ্য করতে পারবেন।