Bulma এর Flexbox

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

১. Flexbox কী?

Flexbox বা Flexible Box Layout একটি CSS মডিউল যা উপাদানগুলোকে একাধিক দিক (horizontal/vertical) এবং জায়গায় সুসংহতভাবে সাজাতে সাহায্য করে। এটি একটি প্যারেন্ট কন্টেইনার (container) এবং তার ভিতরের কন্টেন্ট (items) এর মধ্যে স্পেস এবং অ্যালাইনমেন্ট নির্ধারণে সহায়ক।

Bulma ফ্রেমওয়ার্কে Flexbox এর বিভিন্ন ক্লাস এবং উপাদান রয়েছে যা আপনাকে সহজেই Flexbox ব্যবহার করার সুযোগ দেয়।

২. Bulma তে Flexbox এর ব্যবহার

Bulma তে Flexbox ব্যবহারের জন্য কিছু প্রি-ডিফাইনড ক্লাস রয়েছে, যা আপনাকে Flexbox এর সুবিধা সহজেই ব্যবহার করতে দেয়। নিচে Bulma তে Flexbox ব্যবহারের কিছু প্রধান বিষয় আলোচনা করা হয়েছে।

৩. Flexbox কন্টেইনার

Flexbox কন্টেইনার তৈরির জন্য Bulma তে level ক্লাস এবং columns ক্লাস ব্যবহার করা হয়। এই দুটি ক্লাস Flexbox কন্টেইনার তৈরি করে, যাদের মধ্যে উপাদানগুলো ফ্লেক্সিবলি সাজানো যায়।

উদাহরণ: level ক্লাস

level ক্লাস ব্যবহার করে উপাদানগুলো অনুভূমিকভাবে সজ্জিত করা যায়। এতে বাম ও ডান দিকের আইটেমগুলো একে অপরের সাথে সমান্তরালভাবে সাজানো যায়।

<div class="level">
  <div class="level-left">
    <p class="level-item">Left Item</p>
  </div>
  <div class="level-right">
    <p class="level-item">Right Item</p>
  </div>
</div>

এখানে, level-left এবং level-right ক্লাস ব্যবহার করে দুটি আইটেমকে একে অপরের বিপরীত দিকে সাজানো হয়েছে।

উদাহরণ: columns ক্লাস

columns ক্লাস ব্যবহার করে কলাম আকারে Flexbox কন্টেইনার তৈরি করা যায়।

<div class="columns">
  <div class="column">
    <div class="box">
      <p>Column 1</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p>Column 2</p>
    </div>
  </div>
</div>

এখানে, columns এবং column ক্লাস ব্যবহার করে দুটি কলাম তৈরি করা হয়েছে, যেখানে প্রতিটি কলাম ফ্লেক্সিবলি সজ্জিত।

৪. Flexbox এর অ্যালাইনমেন্ট

Flexbox এর সাহায্যে আপনি উপাদানগুলোকে অনুভূমিক এবং উল্লম্বভাবে সাজাতে পারেন। Bulma তে বিভিন্ন ক্লাস রয়েছে যা Flexbox এর alignment নিয়ন্ত্রণ করে।

১. Horizontal Alignment (অনুভূমিক অ্যালাইনমেন্ট)

Bulma তে Flexbox কন্টেইনারের মধ্যে উপাদানগুলোকে অনুভূমিকভাবে (হরিজেন্টালি) সেন্টার, রাইট বা লেফট অ্যালাইন করা যায়।

• Center Alignment: উপাদানগুলোকে অনুভূমিকভাবে সেন্টার করতে is-centered ক্লাস ব্যবহার করুন।

<div class="columns is-centered">
  <div class="column is-half">
    <div class="box">
      <p>Centered Column</p>
    </div>
  </div>
</div>

• Right Alignment: উপাদানগুলোকে ডানদিকে সাজাতে is-right ক্লাস ব্যবহার করুন।

<div class="columns is-right">
  <div class="column">
    <div class="box">
      <p>Right Aligned Column</p>
    </div>
  </div>
</div>

• Left Alignment: এটি ডিফল্টভাবেই হয়, তবে is-left ক্লাস ব্যবহার করে নিশ্চিত করা যেতে পারে।

<div class="columns is-left">
  <div class="column">
    <div class="box">
      <p>Left Aligned Column</p>
    </div>
  </div>
</div>

২. Vertical Alignment (উল্লম্ব অ্যালাইনমেন্ট)

Bulma তে Flexbox কন্টেইনারের মধ্যে উপাদানগুলোকে উল্লম্বভাবে (ভার্টিকালি) সেন্টার, টপ বা বটম অ্যালাইন করা যায়।

• Center Alignment: উপাদানগুলোকে উল্লম্বভাবে সেন্টার করতে is-vcentered ক্লাস ব্যবহার করুন।

<div class="columns is-vcentered">
  <div class="column">
    <div class="box">
      <p>Vertically Centered Column</p>
    </div>
  </div>
</div>

• Top Alignment: উপাদানগুলোকে উপরের দিকে সাজাতে is-align-top ক্লাস ব্যবহার করুন।

<div class="columns is-align-top">
  <div class="column">
    <div class="box">
      <p>Top Aligned Column</p>
    </div>
  </div>
</div>

• Bottom Alignment: উপাদানগুলোকে নিচে সাজাতে is-align-bottom ক্লাস ব্যবহার করুন।

<div class="columns is-align-bottom">
  <div class="column">
    <div class="box">
      <p>Bottom Aligned Column</p>
    </div>
  </div>
</div>

৫. Flexbox এর স্পেসিং

Bulma তে Flexbox উপাদানগুলোর মধ্যে স্পেসিং কন্ট্রোল করার জন্যও কিছু প্রি-ডিফাইনড ক্লাস রয়েছে।

১. Spaced Between

যখন আপনি উপাদানগুলোকে equal spacing দিতে চান, তখন is-variable এবং is-<number> ক্লাস ব্যবহার করতে পারেন। উদাহরণস্বরূপ, উপাদানগুলোর মধ্যে একটি নির্দিষ্ট পরিমাণ স্পেস রাখতে is-variable ব্যবহার করুন।

<div class="columns is-variable is-3">
  <div class="column">
    <div class="box">
      <p>Column 1</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p>Column 2</p>
    </div>
  </div>
</div>

এখানে, is-variable is-3 ক্লাস দ্বারা কলামগুলোর মধ্যে 3rem স্পেস দেওয়া হয়েছে।

২. Equal Width Columns

Flexbox এর মাধ্যমে উপাদানগুলোকে সমান আকারে সাজাতে is-equal ক্লাস ব্যবহার করা যায়। এটি কলামগুলোর প্রস্থ সমান করে দেয়।

<div class="columns is-equal">
  <div class="column">
    <div class="box">
      <p>Column 1</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p>Column 2</p>
    </div>
  </div>
</div>

এখানে, is-equal ক্লাস ব্যবহৃত হয়েছে যাতে কলামগুলো সমান আকারে প্রদর্শিত হয়।

৬. সারাংশ

Bulma তে Flexbox ব্যবহারের মাধ্যমে আপনি উপাদানগুলোকে সহজে অনুভূমিক এবং উল্লম্বভাবে সাজাতে, স্পেসিং নিয়ন্ত্রণ করতে, এবং রেসপনসিভ লেআউট তৈরি করতে পারবেন। Bulma তে Flexbox এর জন্য নানা প্রি-ডিফাইনড ক্লাস রয়েছে, যা আপনাকে কোনো CSS কোড না লিখেই সরাসরি ব্যবহার করতে দেয়। level, columns, is-centered, is-vcentered, is-variable ইত্যাদি ক্লাসগুলো Flexbox এর ক্ষমতাকে একদম সহজ করে দেয়, যাতে আপনি দ্রুত এবং কার্যকরী ওয়েব ডিজাইন তৈরি করতে পারেন।

Bulma একটি আধুনিক CSS ফ্রেমওয়ার্ক, যা Flexbox প্রযুক্তি ব্যবহার করে responsive এবং ফ্লেক্সিবল লেআউট তৈরি করতে সহায়তা করে। Flexbox এমন একটি লেআউট মডেল যা ডেভেলপারদের জন্য উপযুক্তভাবে উপাদানকে বিন্যস্ত এবং সমন্বয় করা সহজ করে তোলে। Bulma এই Flexbox মডেলকে শক্তিশালীভাবে ব্যবহার করে, যাতে আপনার ওয়েব পেজগুলো রেসপনসিভ এবং বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শিত হয়।

এই গাইডে, আমরা Bulma এর Flexbox Layout এর মাধ্যমে কীভাবে রেসপনসিভ ডিজাইন তৈরি করা যায় তা আলোচনা করব।

১. Flexbox Layout এর মূল ধারণা

Flexbox হল একটি লেআউট মডেল যা উপাদানগুলিকে একটি নির্দিষ্টভাবে সাজানোর জন্য কন্টেইনার এবং তার মধ্যে থাকা আইটেমের আচরণ নিয়ন্ত্রণ করে। এই মডেলটি কলাম এবং রোতে উপাদানগুলোকে সহজেই সাজাতে সহায়তা করে।

Bulma এ Flexbox এর সুবিধা হলো:

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

Bulma এ Flexbox এর প্রধান ক্লাসগুলো হলো:

• is-flex: Flexbox কন্টেইনার তৈরি করা
• is-flex-direction-row: ফ্লেক্স আইটেমগুলোকে রো (horizontal) আকারে সাজানো
• is-flex-direction-column: ফ্লেক্স আইটেমগুলোকে কলাম (vertical) আকারে সাজানো
• is-align-items-center: আইটেমগুলোকে অনুভূমিকভাবে কেন্দ্রিত করা
• is-justify-content-center: আইটেমগুলোকে উল্লম্বভাবে কেন্দ্রিত করা

২. Flexbox Layout দিয়ে রেসপনসিভ ডিজাইন তৈরি করা

Bulma এর Flexbox ক্লাসগুলো ব্যবহার করে আপনি খুব সহজেই রেসপনসিভ ডিজাইন তৈরি করতে পারেন। নিচে কিছু উদাহরণ দেওয়া হলো:

উদাহরণ ১: সাধারণ Flexbox Layout

এখানে আমরা একটি ফ্লেক্স কন্টেইনার তৈরি করছি, যেখানে তিনটি কলাম থাকবে। স্ক্রীনের আকার ছোট হলে, এই কলামগুলো একের পর এক vertically সাজানো হবে।

<div class="container">
  <div class="columns is-flex">
    <div class="column is-one-third">
      <div class="box">Column 1</div>
    </div>
    <div class="column is-one-third">
      <div class="box">Column 2</div>
    </div>
    <div class="column is-one-third">
      <div class="box">Column 3</div>
    </div>
  </div>
</div>

এখানে:

• columns ক্লাসটি Flexbox কন্টেইনার তৈরি করে।
• is-one-third ক্লাসটি প্রতিটি কলামকে এক তৃতীয়াংশ প্রস্থ দিয়ে সাজায়।
• যখন স্ক্রীন সাইজ ছোট হবে, Bulma স্বয়ংক্রিয়ভাবে এই কলামগুলোকে vertical (column) আকারে সাজিয়ে নেবে।

উদাহরণ ২: Flexbox ব্যবহার করে রেসপনসিভ গ্রিড

Bulma এর Flexbox লেআউট ব্যবহার করে রেসপনসিভ গ্রিড তৈরি করা যায়। নিচে দেখানো হলো কীভাবে আপনি বিভিন্ন স্ক্রীন সাইজে কলামের সংখ্যা পরিবর্তন করতে পারেন।

<div class="container">
  <div class="columns is-multiline">
    <div class="column is-4-tablet is-3-desktop">
      <div class="box">Column 1</div>
    </div>
    <div class="column is-4-tablet is-3-desktop">
      <div class="box">Column 2</div>
    </div>
    <div class="column is-4-tablet is-3-desktop">
      <div class="box">Column 3</div>
    </div>
    <div class="column is-4-tablet is-3-desktop">
      <div class="box">Column 4</div>
    </div>
  </div>
</div>

এখানে:

• is-multiline ক্লাসটি গ্রিডকে অনেকগুলো লাইন বা সারিতে ভাগ করার সুবিধা দেয়।
• is-4-tablet এবং is-3-desktop ক্লাসগুলো কলামগুলোর আকারকে ট্যাবলেট এবং ডেস্কটপ স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করে। ট্যাবলেট সাইজে প্রতি সারিতে ৩টি কলাম, ডেস্কটপে প্রতি সারিতে ৪টি কলাম প্রদর্শিত হবে।

৩. Flexbox এর মাধ্যমে উপাদান কেন্দ্রিত করা

Bulma এর Flexbox কন্টেইনার ব্যবহার করে আপনি আপনার উপাদানগুলোকে অনুভূমিক বা উল্লম্বভাবে কেন্দ্রীকরণ করতে পারেন।

উদাহরণ ১: কেন্দ্রীকৃত কনটেন্ট (Horizontally)

<div class="container is-flex is-justify-content-center">
  <div class="box">Centered Content</div>
</div>

এখানে, is-flex এবং is-justify-content-center ক্লাস দুটি ব্যবহার করে কনটেন্টকে অনুভূমিকভাবে কেন্দ্রিত করা হয়েছে।

উদাহরণ ২: কেন্দ্রীকৃত কনটেন্ট (Vertically)

<div class="container is-flex is-align-items-center" style="height: 400px;">
  <div class="box">Centered Content Vertically</div>
</div>

এখানে, is-flex এবং is-align-items-center ক্লাস দুটি ব্যবহার করে কনটেন্টকে উল্লম্বভাবে কেন্দ্রিত করা হয়েছে। height: 400px; স্টাইলটি কন্টেইনারের উচ্চতা নির্ধারণ করে যাতে উপাদানটি উল্লম্বভাবে কেন্দ্রিত হতে পারে।

৪. Flexbox এর মাধ্যমে রেসপনসিভ কনটেন্ট

আপনি Flexbox ব্যবহার করে আপনার কনটেন্টকে স্ক্রীনের সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তন করতে পারেন। নিচের উদাহরণটি দেখুন যেখানে কনটেন্ট রেসপনসিভভাবে বিভিন্ন আকারে প্রদর্শিত হবে:

<div class="container is-flex is-flex-wrap-wrap">
  <div class="box is-4-tablet is-3-desktop">Box 1</div>
  <div class="box is-4-tablet is-3-desktop">Box 2</div>
  <div class="box is-4-tablet is-3-desktop">Box 3</div>
  <div class="box is-4-tablet is-3-desktop">Box 4</div>
</div>

এখানে:

• is-flex-wrap-wrap ক্লাসটি কনটেন্টকে রেসপনসিভভাবে মোড়ানো বা ওয়াপিং করতে সহায়তা করে।
• is-4-tablet এবং is-3-desktop ক্লাসগুলো দিয়ে প্রতি সারিতে কলামের সংখ্যা নির্ধারণ করা হয়েছে। স্ক্রীন সাইজ অনুযায়ী এগুলো পরিবর্তিত হবে।

সারাংশ

Bulma ফ্রেমওয়ার্ক Flexbox প্রযুক্তি ব্যবহার করে রেসপনসিভ এবং ফ্লেক্সিবল লেআউট তৈরি করা সহজ করে তোলে। Flexbox এর মাধ্যমে আপনি সহজেই উপাদানগুলোকে অনুভূমিক বা উল্লম্বভাবে সাজাতে, কেন্দ্রিত করতে এবং রেসপনসিভ ডিজাইন তৈরি করতে পারেন। Bulma এর columns, is-flex, is-justify-content-center, এবং is-align-items-center ক্লাসগুলো ব্যবহার করে যেকোনো ধরনের ফ্লেক্সিবল এবং রেসপনসিভ লেআউট খুব সহজে তৈরি করা সম্ভব।

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

১. Flex Containers

Flex Container হলো এমন একটি কন্টেইনার যা তার অভ্যন্তরীণ উপাদানগুলিকে (Flex Items) ফ্লেক্সবক্স পদ্ধতিতে সাজানোর জন্য ব্যবহৃত হয়। Bulma তে columns ক্লাসটি একটি ফ্লেক্স কন্টেইনার হিসেবে কাজ করে, যা কন্টেইনারের ভিতরে উপাদানগুলোকে সজ্জিত করে।

Flex Container এর ব্যবহার:

<div class="columns">
  <div class="column">
    <!-- Column 1 Content -->
  </div>
  <div class="column">
    <!-- Column 2 Content -->
  </div>
  <div class="column">
    <!-- Column 3 Content -->
  </div>
</div>

Bulma এর columns ক্লাস:

• columns ক্লাসটি একটি ফ্লেক্স কন্টেইনার হিসাবে কাজ করে।
• এটি স্বয়ংক্রিয়ভাবে কন্টেইনারের ভিতরে থাকা column উপাদানগুলির মধ্যে স্থান নির্ধারণ করে এবং তাদের সঠিকভাবে সজ্জিত করে।

২. Flex Items

Flex Items হলো ফ্লেক্স কন্টেইনারের ভিতরে থাকা উপাদানগুলি, যেগুলি ফ্লেক্সবক্স সিস্টেমের মাধ্যমে সজ্জিত করা হয়। Bulma তে column ক্লাস একটি Flex Item হিসেবে কাজ করে, এবং এই ক্লাসটির মাধ্যমে আপনি বিভিন্ন কলাম তৈরি করতে পারেন।

Flex Items এর ব্যবহার:

<div class="columns">
  <div class="column is-one-third">
    <!-- Column 1 Content -->
  </div>
  <div class="column is-one-third">
    <!-- Column 2 Content -->
  </div>
  <div class="column is-one-third">
    <!-- Column 3 Content -->
  </div>
</div>

Bulma এর column ক্লাস:

• column ক্লাসটি Flex Item হিসেবে কাজ করে। এটি একটি ফ্লেক্স আইটেমের রূপে কন্টেইনারের ভিতরে থাকে এবং কন্টেইনারের মধ্যে প্রস্থ নির্ধারণ করতে সহায়তা করে।
• is-one-third বা is-half এর মতো বিভিন্ন সাইজ ক্লাস ব্যবহার করে আপনি প্রতিটি column এর প্রস্থ কাস্টমাইজ করতে পারেন।

৩. Flex Containers এর কিছু আরও বৈশিষ্ট্য

Bulma তে Flex Containers এর কিছু অতিরিক্ত বৈশিষ্ট্যও রয়েছে, যেমন উপাদানগুলির স্থান আলাদা করা, কেন্দ্রীভূত করা এবং তাদেরকে একে অপরের সাথে সজ্জিত করার জন্য ব্যবহার করা হয়।

কলামের মধ্যে গ্যাপ তৈরি করা:

Bulma তে আপনি columns ক্লাসের সাথে is-variable ক্লাস ব্যবহার করে কলামগুলোর মধ্যে গ্যাপ তৈরি করতে পারেন।

<div class="columns is-variable is-4">
  <div class="column">
    <!-- Column 1 Content -->
  </div>
  <div class="column">
    <!-- Column 2 Content -->
  </div>
  <div class="column">
    <!-- Column 3 Content -->
  </div>
</div>

এখানে is-variable is-4 ক্লাস ব্যবহারের মাধ্যমে কলামের মধ্যে ৪ পিক্সেলের গ্যাপ তৈরি হয়েছে।

কলামগুলিকে কেন্দ্রীভূত করা:

আপনি Flex Containers এর ভিতরে থাকা Flex Items (যেমন column) কে সহজেই কেন্দ্রীভূত করতে পারেন। এর জন্য is-centered ক্লাস ব্যবহার করতে হয়।

<div class="columns is-centered">
  <div class="column is-half">
    <!-- Column Content -->
  </div>
</div>

এখানে is-centered ক্লাসটি কলামগুলিকে কেন্দ্রীভূত করবে।

৪. Flex Items এর কিছু অতিরিক্ত বৈশিষ্ট্য

Flex Items এর বিভিন্ন স্টাইল কাস্টমাইজ করা যায়। Bulma তে Flex Items এর জন্য কিছু অতিরিক্ত ক্লাস যেমন is-half, is-one-quarter, is-full ইত্যাদি ব্যবহার করা যায়। এগুলোর মাধ্যমে আপনি প্রতিটি ফ্লেক্স আইটেমের আকার এবং অবস্থান কাস্টমাইজ করতে পারেন।

Flex Items সাইজ কাস্টমাইজ করা:

<div class="columns">
  <div class="column is-one-quarter">
    <!-- Column 1 Content -->
  </div>
  <div class="column is-half">
    <!-- Column 2 Content -->
  </div>
  <div class="column is-one-quarter">
    <!-- Column 3 Content -->
  </div>
</div>

এখানে প্রথম এবং তৃতীয় কলামটি is-one-quarter সাইজের, এবং মধ্যবর্তী কলামটি is-half সাইজের।

Flex Items এর Alignment:

Flex Items কে Align করতে আপনাকে is-align-items-center, is-align-items-flex-start, is-align-items-flex-end ক্লাস ব্যবহার করতে হবে।

<div class="columns is-align-items-center">
  <div class="column">
    <!-- Column 1 Content -->
  </div>
  <div class="column">
    <!-- Column 2 Content -->
  </div>
</div>

এখানে is-align-items-center ক্লাস ব্যবহার করা হয়েছে যাতে কলামগুলো কেন্দ্রিত অবস্থায় থাকে।

উদাহরণ: Flex Containers এবং Flex Items এর সম্পূর্ণ কোড

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bulma Flex Containers</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>

  <!-- Flex Container with Flex Items -->
  <div class="columns is-variable is-4">
    <div class="column is-one-third">
      <div class="box">Column 1</div>
    </div>
    <div class="column is-one-third">
      <div class="box">Column 2</div>
    </div>
    <div class="column is-one-third">
      <div class="box">Column 3</div>
    </div>
  </div>

  <!-- Flex Container with Centered Flex Items -->
  <div class="columns is-centered">
    <div class="column is-half">
      <div class="box">Centered Column</div>
    </div>
  </div>

</body>
</html>

সারাংশ

• Flex Containers: Bulma তে columns ক্লাস একটি ফ্লেক্স কন্টেইনার হিসেবে কাজ করে এবং এতে থাকা column ক্লাসগুলি Flex Items হিসেবে কাজ করে।
• Flex Items: column ক্লাস ব্যবহার করে আপনি Flex Items তৈরি করতে পারেন এবং সেগুলির সাইজ কাস্টমাইজ করতে পারেন (যেমন is-one-third, is-half ইত্যাদি)।
• Alignments and Spacing: is-centered, is-align-items-center, is-variable ক্লাস ব্যবহার করে আপনি Flex Items এর অবস্থান এবং স্পেসিং নিয়ন্ত্রণ করতে পারেন।

Bulma এর ফ্লেক্সবক্স সিস্টেম ব্যবহারের মাধ্যমে, আপনি খুব সহজেই একটি রেসপনসিভ এবং আধুনিক লেআউট ডিজাইন করতে পারবেন।

Bulma ফ্রেমওয়ার্ক Flexbox-এর উপর ভিত্তি করে ডিজাইন করা হয়েছে, যা লেআউট ম্যানেজমেন্টে অত্যন্ত কার্যকরী এবং সহজ। Flexbox আপনাকে উপাদানগুলোকে একটি কন্টেইনারের মধ্যে সঠিকভাবে সাজানোর জন্য Alignment এবং Justification এর শক্তিশালী অপশন প্রদান করে।

Bulma ফ্রেমওয়ার্কে Alignment এবং Justification খুব সহজেই করা যায় is-align-items-* এবং is-justify-content-* ক্লাসের মাধ্যমে।

১. Flexbox Alignment

Alignment এর মাধ্যমে আপনি উপাদানগুলোকে কন্টেইনারের মধ্যে কিভাবে সঠিকভাবে অবস্থান করাবেন তা নিয়ন্ত্রণ করতে পারবেন। Align-items এবং Align-self দুটি গুরুত্বপূর্ণ CSS প্রপার্টি যা Flexbox-এ Alignment নিয়ন্ত্রণে ব্যবহার হয়।

Bulma এর Alignment ক্লাস:

• is-align-items-flex-start: উপাদানগুলোকে কন্টেইনারের উপরের দিকে রেখে সাজাবে।
• is-align-items-center: উপাদানগুলোকে কন্টেইনারের সেন্টারে বসাবে।
• is-align-items-flex-end: উপাদানগুলোকে কন্টেইনারের নীচে রাখবে।
• is-align-items-stretch: উপাদানগুলোকে কন্টেইনারের পুরো উচ্চতায় প্রসারিত করবে।

উদাহরণ: Flexbox Alignment

<div class="columns is-align-items-center">
  <div class="column">
    <p class="box">Column 1</p>
  </div>
  <div class="column">
    <p class="box">Column 2</p>
  </div>
  <div class="column">
    <p class="box">Column 3</p>
  </div>
</div>

এখানে:

• is-align-items-center ক্লাসটি কনটেইনারের মধ্যে কলামগুলিকে সেন্টার করে রেখেছে।

২. Flexbox Justification

Justification এর মাধ্যমে আপনি উপাদানগুলোর মধ্যে খালি জায়গা কিভাবে বিতরণ করবেন তা নিয়ন্ত্রণ করতে পারবেন। Justify-content প্রপার্টি Flexbox-এ উপাদানগুলোকে উপরের বা নিচের দিকে বা সমানভাবে বিতরণ করতে ব্যবহৃত হয়।

Bulma এর Justification ক্লাস:

• is-justify-content-flex-start: উপাদানগুলোকে কন্টেইনারের বাম দিকে সাজাবে।
• is-justify-content-center: উপাদানগুলোকে কন্টেইনারের মাঝখানে সেন্টার করবে।
• is-justify-content-flex-end: উপাদানগুলোকে কন্টেইনারের ডানদিকে রাখবে।
• is-justify-content-space-between: উপাদানগুলোর মধ্যে সমান জায়গা দিয়ে সাজাবে, প্রথম এবং শেষ উপাদান কন্টেইনারের প্রান্তে থাকবে।
• is-justify-content-space-around: উপাদানগুলোর মধ্যে সমান জায়গা প্রদান করবে, তবে প্রথম এবং শেষ উপাদান কন্টেইনারের প্রান্তে থাকবে না।
• is-justify-content-space-evenly: উপাদানগুলোর মধ্যে সমানভাবে জায়গা দেবে এবং প্রথম এবং শেষ উপাদানও সমান দূরত্বে থাকবে।

উদাহরণ: Flexbox Justification

<div class="columns is-justify-content-space-between">
  <div class="column">
    <p class="box">Column 1</p>
  </div>
  <div class="column">
    <p class="box">Column 2</p>
  </div>
  <div class="column">
    <p class="box">Column 3</p>
  </div>
</div>

এখানে:

• is-justify-content-space-between ক্লাসটি কলামগুলোর মধ্যে সমান জায়গা দিয়ে সাজিয়ে রেখেছে, তবে প্রথম এবং শেষ কলাম কন্টেইনারের প্রান্তে থাকবে।

৩. Flexbox Alignment এবং Justification একসাথে ব্যবহার

আপনি Alignment এবং Justification একসাথে ব্যবহার করে আরও সূক্ষ্মভাবে কনটেন্ট সাজাতে পারেন। উদাহরণস্বরূপ, আপনি কলামগুলোকে সেন্টারে এবং তাদের মধ্যে সমান জায়গা দিয়ে সাজাতে পারেন।

উদাহরণ: Alignment এবং Justification একসাথে

<div class="columns is-align-items-center is-justify-content-space-around">
  <div class="column">
    <p class="box">Column 1</p>
  </div>
  <div class="column">
    <p class="box">Column 2</p>
  </div>
  <div class="column">
    <p class="box">Column 3</p>
  </div>
</div>

এখানে:

• is-align-items-center কলামগুলোকে কন্টেইনারের সেন্টারে সজ্জিত করেছে।
• is-justify-content-space-around কলামগুলোর মধ্যে সমান জায়গা দিয়েছে।

৪. Flexbox Alignment এবং Justification এর প্রাসঙ্গিকতা

Bulma ফ্রেমওয়ার্কে Flexbox Alignment এবং Justification খুবই শক্তিশালী টুলস, যা ওয়েব ডিজাইনে উপাদানগুলোর পজিশনিং, সাজানো, এবং ডিসপ্লে কাস্টমাইজ করার জন্য ব্যবহার হয়। এগুলি ওয়েব পৃষ্ঠাগুলোর মধ্যে উপাদানগুলোকে যথাযথভাবে স্থান দিতে এবং রেসপনসিভ ডিজাইন তৈরি করতে সাহায্য করে।

৫. ফলস স্লট ব্যবহার করা

আপনি যদি flexbox উপাদানগুলোকে সঠিকভাবে পরিচালনা করতে চান তবে flex-wrap প্রপার্টি ব্যবহার করতে পারেন, যা উপাদানগুলোকে অটো-র্যাপিং করবে।

উদাহরণ: Flexbox Wrap

<div class="columns is-flex-wrap-wrap">
  <div class="column is-one-quarter">
    <p class="box">Column 1</p>
  </div>
  <div class="column is-one-quarter">
    <p class="box">Column 2</p>
  </div>
  <div class="column is-one-quarter">
    <p class="box">Column 3</p>
  </div>
  <div class="column is-one-quarter">
    <p class="box">Column 4</p>
  </div>
</div>

এখানে:

• is-flex-wrap-wrap ক্লাসটি উপাদানগুলোকে ওয়াইড স্ক্রীনে পাশাপাশি এবং ছোট স্ক্রীনে একে অপরের নিচে সাজাবে।

সারাংশ

Bulma ফ্রেমওয়ার্কে Flexbox Alignment এবং Justification ব্যবহার করে আপনি খুব সহজে কনটেন্টের পজিশন, আকার এবং স্থান নিয়ন্ত্রণ করতে পারবেন। Alignment আপনার উপাদানগুলোকে কন্টেইনারের মধ্যে সঠিকভাবে সাজাতে সাহায্য করে, যেমন সেন্টার, টপ বা বটমে। Justification উপাদানগুলোর মধ্যে স্থানকে সমানভাবে বিতরণ করতে ব্যবহৃত হয়। Bulma এর Flexbox ভিত্তিক ক্লাস সিস্টেম এই কাজগুলো খুবই সহজ এবং কার্যকরীভাবে করতে সাহায্য করে, যা রেসপনসিভ ডিজাইনে অত্যন্ত কার্যকরী।

Bulma একটি ফ্লেক্সবক্স-ভিত্তিক CSS ফ্রেমওয়ার্ক, যা ডিজাইনারদের এবং ডেভেলপারদের ওয়েব পেজে কমপ্লেক্স লেআউট তৈরি করতে সাহায্য করে। এটি columns এবং column ক্লাসের মাধ্যমে গ্রিড সিস্টেম ব্যবহার করে, যা ফ্লেক্সবক্সের শক্তি ব্যবহার করে পেজের কন্টেন্টকে বিভিন্ন আকারে সাজানোর সুবিধা দেয়। Flexbox এবং Columns এর সমন্বয় Bulma-তে লেআউট এবং কলাম ব্যবস্থাপনা আরও সহজ এবং নমনীয় করে তোলে।

Flexbox এবং Columns এর মধ্যে সম্পর্ক

Bulma এর columns সিস্টেম ফ্লেক্সবক্সের শক্তি ব্যবহার করে। columns ক্লাসটি এক ধরনের কন্টেইনার হিসাবে কাজ করে, এবং এর মধ্যে থাকা প্রতিটি column ফ্লেক্সবক্সের আইটেম হিসেবে কাজ করে। এতে কলামগুলো স্বয়ংক্রিয়ভাবে কন্টেইনারের মধ্যে সেন্টার, রাইট বা লেফট আলাইন হতে পারে এবং মোবাইল, ট্যাবলেট, ডেস্কটপ পর্দায় বিভিন্ন রেসপনসিভ ডিজাইন তৈরি করা যায়।

Flexbox এর সুবিধা

Flexbox ব্যবহার করে Bulma অত্যন্ত কার্যকরী এবং রেসপনসিভ গ্রিড সিস্টেম তৈরি করেছে। এটি আপনাকে উপাদানগুলোর অবস্থান নিয়ন্ত্রণ করতে দেয় যেমন:

• Alignment (এলাইনমেন্ট): উপাদানগুলোকে কিভাবে সেন্টার, রাইট, বা লেফট আলাইন করা হবে।
• Justification (জাস্টিফিকেশন): উপাদানগুলোর মধ্যে ফাঁকা জায়গা কিভাবে বিতরণ করা হবে।
• Wrapping (র‍্যাপিং): যদি কলামগুলোর সংখ্যা বা আকার বড় হয়ে যায়, তবে তারা স্বয়ংক্রিয়ভাবে পরবর্তী লাইনে চলে যাবে।

১. Flexbox এবং Columns এর ব্যবহার

Bulma এর columns সিস্টেমে Flexbox এর justify-content, align-items ইত্যাদি প্রোপার্টি ব্যবহার করা যায়। এটি আপনাকে কলামগুলোকে কেন্দ্রবিন্দুতে সেন্টার বা কাস্টম অবস্থানে ঠিক করতে দেয়।

উদাহরণ: Flexbox এবং Columns এর সাথে Alignment

<div class="columns is-centered">
  <div class="column is-one-third">
    <div class="box">Column 1</div>
  </div>
  <div class="column is-one-third">
    <div class="box">Column 2</div>
  </div>
  <div class="column is-one-third">
    <div class="box">Column 3</div>
  </div>
</div>

এখানে is-centered ক্লাসটি columns কন্টেইনারে প্রয়োগ করা হয়েছে, যার ফলে সব কলাম কন্টেইনারের মধ্যে সেন্টার হয়ে যাবে।

২. Flexbox Wrapping এবং Columns

Flexbox এর flex-wrap প্রোপার্টি কলামগুলোর সাইজ বাড়লে, তাদের পরবর্তী লাইনে সোজা করে দেয়। Bulma-তে columns ক্লাসে ফ্লেক্স র‍্যাপিং সক্রিয় করা যেতে পারে।

উদাহরণ: Flexbox Wrapping

<div class="columns is-multiline">
  <div class="column is-one-quarter">
    <div class="box">Column 1</div>
  </div>
  <div class="column is-one-quarter">
    <div class="box">Column 2</div>
  </div>
  <div class="column is-one-quarter">
    <div class="box">Column 3</div>
  </div>
  <div class="column is-one-quarter">
    <div class="box">Column 4</div>
  </div>
</div>

এখানে is-multiline ক্লাসটি কলামগুলোর র‍্যাপিং সক্ষম করে, যার ফলে কলামগুলো যখন এক লাইনে সঠিকভাবে ফিট না হবে, তখন পরবর্তী লাইনে চলে যাবে। এতে রেসপনসিভ ডিজাইন আরও সোজা এবং সুবিধাজনক হবে।

৩. Column এর আকার এবং Flexbox প্রোপার্টি

Flexbox এর মাধ্যমে আপনি কলামের আকার এবং স্থান নিয়ন্ত্রণ করতে পারেন। Bulma এর column ক্লাসের মধ্যে is-half, is-one-third, is-full ইত্যাদি ক্লাস ব্যবহার করে কলামের আকার কাস্টমাইজ করা যায়।

উদাহরণ: Column এর সাইজ কাস্টমাইজ

<div class="columns">
  <div class="column is-half">
    <div class="box">This is a half-width column.</div>
  </div>
  <div class="column is-one-quarter">
    <div class="box">This is a quarter-width column.</div>
  </div>
  <div class="column">
    <div class="box">This is a full-width column.</div>
  </div>
</div>

এখানে:

• is-half: প্রথম কলামটি কন্টেইনারের অর্ধেক জায়গা নেবে।
• is-one-quarter: দ্বিতীয় কলামটি এক চতুর্থাংশ জায়গা নেবে।
• column: তৃতীয় কলামটি পুরো জায়গা নেবে।

৪. Column Alignment এবং Flexbox

Bulma এর গ্রিড সিস্টেমে Flexbox ব্যবহার করে কলামগুলোকে বিভিন্নভাবে এলাইন করা যায়। যেমন:

• is-flex: কন্টেইনারে ফ্লেক্স প্রপার্টি অ্যাপ্লাই করতে ব্যবহৃত হয়।
• is-align-items-center: কলামগুলোকে সেন্টার করতে ব্যবহৃত হয়।

উদাহরণ: Column Alignment with Flexbox

<div class="columns is-align-items-center">
  <div class="column is-one-third">
    <div class="box">Column 1</div>
  </div>
  <div class="column is-one-third">
    <div class="box">Column 2</div>
  </div>
</div>

এখানে is-align-items-center ক্লাসের মাধ্যমে কলামগুলো সেন্টার করা হয়েছে, যেগুলি কন্টেইনারের মধ্যে লাইন আপ থাকবে।

৫. Flexbox এবং Columns এর সাথে Responsive Design

Flexbox এবং Columns সিস্টেম ব্যবহার করে রেসপনসিভ ডিজাইন তৈরি করা সহজ। Bulma এর is-mobile, is-tablet, is-desktop ক্লাসের মাধ্যমে আপনি বিভিন্ন ডিভাইসের জন্য আলাদা কলাম সাইজ নির্ধারণ করতে পারেন।

উদাহরণ: Responsive Columns with Flexbox

<div class="columns is-mobile is-tablet is-desktop">
  <div class="column is-half-mobile is-one-quarter-tablet is-one-third-desktop">
    <div class="box">Column 1</div>
  </div>
  <div class="column is-half-mobile is-one-quarter-tablet is-one-third-desktop">
    <div class="box">Column 2</div>
  </div>
  <div class="column is-half-mobile is-one-quarter-tablet is-one-third-desktop">
    <div class="box">Column 3</div>
  </div>
</div>

এখানে:

• is-half-mobile: মোবাইলের জন্য কলামটি অর্ধেক সাইজ নেবে।
• is-one-quarter-tablet: ট্যাবলেটের জন্য কলামটি এক চতুর্থাংশ সাইজ নেবে।
• is-one-third-desktop: ডেস্কটপের জন্য কলামটি এক তৃতীয়াংশ সাইজ নেবে।

সারাংশ

Bulma-তে Flexbox এবং Columns এর সমন্বয় ব্যবহার করে আপনি খুব সহজে রেসপনসিভ এবং কাস্টম লেআউট তৈরি করতে পারেন। Flexbox এর শক্তি ব্যবহার করে কলামগুলোকে স্বয়ংক্রিয়ভাবে সজ্জিত এবং এলাইন করা যায়, এবং Columns সিস্টেমের মাধ্যমে আপনি নির্দিষ্ট আকারের কলাম তৈরি করতে পারেন। Flexbox এর alignment, justification, এবং wrapping প্রোপার্টি Bulma-তে একটি অত্যন্ত নমনীয় গ্রিড সিস্টেম তৈরি করেছে, যা ডিভাইসের আকারের সাথে সঙ্গতি রেখে ওয়েব পেজের লেআউট তৈরি করতে সাহায্য করে।