Column Sizes এবং Nesting

Bulma CSS ফ্রেমওয়ার্কের Columns সিস্টেম অত্যন্ত শক্তিশালী এবং লেআউট তৈরিতে সহজে ব্যবহারযোগ্য। এটি গ্রিড সিস্টেমের উপর ভিত্তি করে, যা মোবাইল-প্রথম ডিজাইনে খুব উপকারী। এখানে Bulma এর Column Sizes এবং Nesting Columns এর বিষয়ে বিস্তারিত আলোচনা করা হয়েছে।

১. Column Sizes (কলামের সাইজ)

Bulma ফ্রেমওয়ার্কের গ্রিড সিস্টেমে কলামের সাইজ বিভিন্নভাবে কাস্টমাইজ করা যেতে পারে। সাধারণভাবে, Bulma 12টি কলাম তৈরি করে, এবং প্রতিটি কলামের সাইজ নির্ধারণ করা হয় column ক্লাসের মাধ্যমে।

Column Size Syntax

<div class="columns">
  <div class="column is-half">Column 1</div>
  <div class="column is-half">Column 2</div>
</div>

এখানে is-half ক্লাস দুটি কলামের সাইজ সঠিকভাবে সমান ভাগে ভাগ করে দিচ্ছে। Bulma এর গ্রিড সিস্টেমে 12 অংশে ভাগ করা হয়ে থাকে, এবং আপনি কলামগুলোর সাইজ প্রপার্টি যেমন is-half, is-one-third, is-one-fourth ইত্যাদি ব্যবহার করে কাস্টমাইজ করতে পারেন।

Column Size Examples

1. is-half: 50% সাইজ

<div class="columns">
  <div class="column is-half">50% Width Column</div>
  <div class="column is-half">50% Width Column</div>
</div>

2. is-one-third: 33.33% সাইজ

<div class="columns">
  <div class="column is-one-third">33.33% Width Column</div>
  <div class="column is-one-third">33.33% Width Column</div>
  <div class="column is-one-third">33.33% Width Column</div>
</div>

3. is-one-fourth: 25% সাইজ

<div class="columns">
  <div class="column is-one-fourth">25% Width Column</div>
  <div class="column is-one-fourth">25% Width Column</div>
  <div class="column is-one-fourth">25% Width Column</div>
  <div class="column is-one-fourth">25% Width Column</div>
</div>

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

২. Column Sizes এর আরো ভ্যারিয়েশন

Bulma আরও কিছু প্রি-ডিফাইনড সাইজ প্রদান করে, যা আপনাকে বিভিন্ন কলাম সাইজ নির্ধারণে সাহায্য করবে:

• is-one-quarter: 25% সাইজ
• is-half: 50% সাইজ
• is-two-thirds: 66.66% সাইজ
• is-three-quarters: 75% সাইজ
• is-full: 100% সাইজ

এছাড়া, আপনি is-narrow ক্লাসও ব্যবহার করতে পারেন, যা খুব সংকীর্ণ (ন্যারো) কলাম তৈরি করবে। যেমন:

<div class="columns">
  <div class="column is-narrow">Narrow Column</div>
  <div class="column">Regular Column</div>
</div>

৩. Columns Nesting (কলাম নেস্টিং)

Bulma এর Nesting Columns ফিচার আপনাকে একটি কলামের মধ্যে আরও কলাম রাখতে দেয়। এটি ব্যবহার করে আপনি জটিল এবং multi-level লেআউট তৈরি করতে পারবেন। কলাম নেস্টিং করার সময়, ভিতরের কলামগুলির সাইজও আলাদা করা যায়।

Nesting Columns উদাহরণ

<div class="columns">
  <div class="column is-half">
    <div class="columns">
      <div class="column is-one-third">Nested Column 1</div>
      <div class="column is-one-third">Nested Column 2</div>
      <div class="column is-one-third">Nested Column 3</div>
    </div>
  </div>
  <div class="column is-half">Regular Column</div>
</div>

এখানে প্রথম কলামের ভিতরে একটি columns ক্লাস ব্যবহার করে তিনটি ছোট কলাম রাখা হয়েছে। মূল কলামের মধ্যে নেস্ট করা এই কলামগুলো Bulma এর গ্রিড সিস্টেমের মাধ্যমে সঠিকভাবে স্থাপন করা হয়েছে।

৪. Column Alignment (কলামের এলাইনমেন্ট)

Bulma আপনাকে কলামগুলোর কনটেন্টকে সহজে এলাইন করতে দেয়। নিচে কিছু উদাহরণ দেয়া হলো:

1. Center Align (মাঝখানে এলাইন):

<div class="columns is-centered">
  <div class="column is-one-third">
    <p>This column is centered.</p>
  </div>
</div>

2. Right Align (ডান দিকে এলাইন):

<div class="columns is-right">
  <div class="column is-one-third">
    <p>This column is aligned to the right.</p>
  </div>
</div>

3. Column Justify (কলামের মধ্যে স্পেস ঠিক করা):

<div class="columns is-vcentered">
  <div class="column is-one-third">
    <p>This column is vertically centered.</p>
  </div>
  <div class="column is-one-third">
    <p>This column is vertically centered.</p>
  </div>
</div>

এটি কলামের কনটেন্টকে উল্লম্বভাবে (vertically) কেন্দ্রিত করবে।

৫. Column Offset (কলাম অফসেট)

Bulma এর গ্রিড সিস্টেমে offset ব্যবহার করে একটি কলামকে ডান অথবা বামে সরানো যায়। এটি মূলত কলামের মধ্যে স্পেস বাড়ানোর কাজ করে।

<div class="columns">
  <div class="column is-offset-one-quarter is-one-half">
    <p>This column is offset by one quarter and takes up half the width.</p>
  </div>
</div>

এখানে is-offset-one-quarter কলামটি এক চতুর্থাংশ অফসেট করে, এবং is-one-half সাইজের কলাম তৈরি করে।

সারাংশ

Bulma এর Column Sizes এবং Nesting ফিচারগুলো খুবই শক্তিশালী এবং সোজা, যা দিয়ে আপনি সহজেই রেসপনসিভ এবং মোবাইল-প্রথম লেআউট তৈরি করতে পারবেন। আপনি বিভিন্ন column sizes যেমন is-half, is-one-third ইত্যাদি ব্যবহার করে আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী কলামগুলো কাস্টমাইজ করতে পারবেন। এছাড়া, Nesting ফিচার ব্যবহার করে আপনি একটি কলামের মধ্যে আরও ছোট কলাম রাখতে পারেন। Bulma এর এই গ্রিড সিস্টেমের মাধ্যমে আপনি আরো সহজে এবং দ্রুত প্রফেশনাল ডিজাইন তৈরি করতে পারবেন।