Bulma এর Grid System

Bulma CSS ফ্রেমওয়ার্কের Grid System একটি রেসপনসিভ লেআউট তৈরি করতে ব্যবহৃত হয়। এটি খুবই সহজ এবং ব্যবহারকারী-বান্ধব, যা আপনাকে একাধিক কলাম এবং লাইন তৈরি করতে সহায়তা করে। Bulma এর Grid System ভিত্তি করে কাজ করে columns এবং column ক্লাসের মাধ্যমে, যা ডাইনামিক এবং রেসপনসিভ ওয়েবসাইট ডিজাইন তৈরিতে সাহায্য করে।

Bulma Grid System এর মূল উপাদান

1. Columns: Bulma এর গ্রিড সিস্টেমের মূল উপাদান হল columns ক্লাস। এটি একটি কন্টেইনার হিসেবে কাজ করে, যেখানে এক বা একাধিক column থাকবে।
2. Column: column ক্লাসটি ব্যবহৃত হয় গ্রিডের মধ্যে বিভিন্ন কলাম তৈরি করতে। একটি কন্টেইনারের মধ্যে একাধিক কলাম থাকতে পারে, এবং প্রতিটি কলাম আলাদা আলাদা কনটেন্ট ধারণ করবে।
3. Column Sizing: Bulma এ কলামগুলোর আকার নির্ধারণ করা যায় বিভিন্ন কৌশল ব্যবহার করে, যেমন গড়ানো কলাম, নির্দিষ্ট সাইজ দেয়া, অথবা রেসপনসিভ সাইজের ভিত্তিতে কলাম আকার পরিবর্তন করা।

১. বেসিক Grid Structure

Bulma এর grid system তৈরি করা বেশ সোজা। নিচে একটি সাধারণ উদাহরণ দেয়া হলো যেখানে দুটি কলাম আছে:

<div class="columns">
  <div class="column">
    <p>This is the first column.</p>
  </div>
  <div class="column">
    <p>This is the second column.</p>
  </div>
</div>

এখানে দুটি column ক্লাস ব্যবহৃত হয়েছে, এবং এগুলি সমান আকারে প্রদর্শিত হবে।

২. কলামের আকার নির্ধারণ করা

Bulma এর গ্রিড সিস্টেমে আপনি কলামের আকার নির্ধারণ করতে পারেন। বিভিন্ন আকারের কলাম তৈরি করার জন্য is-{size} ক্লাস ব্যবহার করা হয়। উদাহরণস্বরূপ, is-half ক্লাস ব্যবহার করলে কলামটি অর্ধেক জায়গা নিবে।

উদাহরণ: নির্দিষ্ট আকারের কলাম

<div class="columns">
  <div class="column is-half">
    <p>This column takes up half of the space.</p>
  </div>
  <div class="column is-half">
    <p>This column also takes up half of the space.</p>
  </div>
</div>

এখানে, দুটি কলাম রয়েছে, যেগুলি is-half ক্লাসের মাধ্যমে অর্ধেক জায়গা নিয়ে রয়েছে।

৩. কলামগুলির বিভিন্ন আকার

Bulma আপনাকে বিভিন্ন আকারের কলাম তৈরি করার সুবিধা দেয়। আপনি যেমন is-1, is-2, ..., is-12 ক্লাস ব্যবহার করে কলামের সাইজ নিয়ন্ত্রণ করতে পারেন। এখানে is-1 মানে ১২ ভাগের মধ্যে ১ ভাগ জায়গা নিবে এবং is-12 পুরো ১২ ভাগ জায়গা নিবে।

উদাহরণ: বিভিন্ন আকারের কলাম

<div class="columns">
  <div class="column is-3">
    <p>This column takes up 3/12 of the space.</p>
  </div>
  <div class="column is-6">
    <p>This column takes up 6/12 of the space.</p>
  </div>
  <div class="column is-3">
    <p>This column takes up 3/12 of the space.</p>
  </div>
</div>

এখানে, প্রথম এবং তৃতীয় কলাম is-3 ক্লাস ব্যবহার করেছে, যার মানে তারা ১২ ভাগের মধ্যে ৩ ভাগ জায়গা নিবে, আর মধ্যবর্তী কলাম is-6 ক্লাসের মাধ্যমে ৬ ভাগ জায়গা নেবে।

৪. রেসপনসিভ Grid System

Bulma এর গ্রিড সিস্টেম রেসপনসিভ। এটি মোবাইল-ফার্স্ট ডিজাইন অনুসরণ করে, অর্থাৎ মোবাইল ডিভাইসের জন্য এটি ডিফল্ট ভাবে কলামগুলোকে পুরোপুরি স্ট্যাক করে দেয়। তবে, আপনি is-{size}- ক্লাসের সাহায্যে বিভিন্ন স্ক্রীন সাইজের জন্য কলামের আকার পরিবর্তন করতে পারেন।

উদাহরণ: রেসপনসিভ কলাম

<div class="columns">
  <div class="column is-half-tablet is-one-quarter-desktop">
    <p>This column takes up half on tablet and one-quarter on desktop.</p>
  </div>
  <div class="column is-half-tablet is-three-quarters-desktop">
    <p>This column takes up half on tablet and three-quarters on desktop.</p>
  </div>
</div>

এখানে, প্রথম কলামটি ট্যাবলেট স্ক্রীনে অর্ধেক জায়গা নিবে এবং ডেস্কটপ স্ক্রীনে এক চতুর্থাংশ জায়গা নিবে। দ্বিতীয় কলামটি ট্যাবলেট স্ক্রীনে অর্ধেক এবং ডেস্কটপে তিন চতুর্থাংশ জায়গা নিবে।

৫. Column Alignment

Bulma এর গ্রিড সিস্টেমে আপনি কলামগুলির alignment নিয়ন্ত্রণ করতে পারেন। is-centered, is-pulled-left, এবং is-pulled-right ক্লাস ব্যবহার করে আপনি কলামগুলোকে একে অপরের সাথে কেন্দ্রিত বা দিকের দিকে নিয়ে যেতে পারেন।

উদাহরণ: কলাম সেন্টার করা

<div class="columns is-centered">
  <div class="column is-half">
    <p>This column is centered in the middle of the page.</p>
  </div>
</div>

এখানে is-centered ক্লাস ব্যবহার করা হয়েছে, যাতে কলামটি পুরো পেজের মাঝখানে অবস্থান নেবে।

৬. Nested Columns (নেস্টেড কলাম)

Bulma এ আপনি নেস্টেড কলামও তৈরি করতে পারেন, অর্থাৎ এক কলামের ভিতরে আরেকটি কলাম রাখতে পারেন। এটি খুবই কার্যকর যখন আপনি আরও জটিল লেআউট তৈরি করতে চান।

উদাহরণ: Nested Columns

<div class="columns">
  <div class="column is-one-quarter">
    <p>This is the first column.</p>
    <div class="columns">
      <div class="column">
        <p>This is a nested column inside the first column.</p>
      </div>
    </div>
  </div>
  <div class="column is-three-quarters">
    <p>This is the second column.</p>
  </div>
</div>

এখানে, প্রথম কলামের ভিতরে আরও একটি columns এবং column ক্লাস ব্যবহার করা হয়েছে, যা নেস্টেড কলাম তৈরি করে।

সারাংশ

Bulma এর Grid System একটি শক্তিশালী এবং সহজ উপায়, যার মাধ্যমে আপনি রেসপনসিভ ওয়েবসাইট ডিজাইন করতে পারেন। columns এবং column ক্লাস ব্যবহার করে আপনি বিভিন্ন আকারের কলাম তৈরি করতে পারেন। আপনি চাইলে কলামের সাইজ নিয়ন্ত্রণ করতে পারেন, রেসপনসিভ ডিজাইন তৈরি করতে পারেন, এবং নেস্টেড কলাম ব্যবহার করে আরও জটিল লেআউট তৈরি করতে পারেন। Bulma এর Grid System অত্যন্ত নমনীয় এবং ব্যবহারকারী-বান্ধব, যা ডেভেলপারদের দ্রুত এবং সহজভাবে ওয়েবসাইট ডিজাইন করতে সহায়তা করে।

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

Bulma Grid System কী?

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

Bulma Grid System এর মূল উপাদান

Bulma এর গ্রিড সিস্টেমে মূলত দুটি প্রধান উপাদান ব্যবহৃত হয়:

1. Columns (কলাম)
2. Columns' children (column) (কলাম এর মধ্যে যেসব উপাদান থাকে)

এখানে columns হল একটি কন্টেইনার যা বিভিন্ন column কে ধারণ করে এবং প্রতিটি column কন্টেন্ট ধারণ করে।

১. Columns কিভাবে কাজ করে?

Bulma এর columns ক্লাস একধরনের কন্টেইনার, যা কলামগুলোর একটি গুচ্ছ তৈরি করে। এর মধ্যে প্রতিটি column এর মধ্যে এক বা একাধিক উপাদান থাকতে পারে। আপনি চাইলে কলামের প্রস্থ কাস্টমাইজ করতে পারেন। নিচে একটি সাধারণ উদাহরণ দেখানো হলো:

উদাহরণ:

<div class="columns">
  <div class="column">
    <p>This is the first column.</p>
  </div>
  <div class="column">
    <p>This is the second column.</p>
  </div>
</div>

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

২. Column এর আকার কাস্টমাইজ করা

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

উদাহরণ:

<div class="columns">
  <div class="column is-half">
    <p>This column takes up half the space.</p>
  </div>
  <div class="column is-one-third">
    <p>This column takes up one-third of the space.</p>
  </div>
</div>

এখানে:

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

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

Bulma এর গ্রিড সিস্টেমে আপনি কলামগুলোর অবস্থান পরিবর্তন করতে পারেন। is-centered, is-justify ইত্যাদি ক্লাস ব্যবহার করে কলামগুলো সেন্টার বা রাইট বা লেফট-অ্যালাইন করা যায়।

উদাহরণ:

<div class="columns is-centered">
  <div class="column is-half">
    <p>This column is centered within the container.</p>
  </div>
</div>

এখানে is-centered ক্লাসের মাধ্যমে কলামটি কন্টেইনারের মাঝখানে সেন্টার করা হয়েছে।

৪. Responsive Grid System

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

উদাহরণ:

<div class="columns is-mobile">
  <div class="column is-one-half-tablet is-one-quarter-desktop">
    <p>This column takes up half the width on tablet and one-quarter on desktop.</p>
  </div>
  <div class="column is-one-half-tablet is-three-quarters-desktop">
    <p>This column takes up half the width on tablet and three-quarters on desktop.</p>
  </div>
</div>

এখানে:

• is-one-half-tablet ও is-one-quarter-desktop ক্লাসের মাধ্যমে কলামের আকার ট্যাবলেট এবং ডেস্কটপের জন্য আলাদা করা হয়েছে।

৫. Columns Nested (নেস্টেড কলাম)

Bulma এর গ্রিড সিস্টেমে আপনি এক কলামের মধ্যে আরও কলাম নেস্ট (গুচ্ছ) করতে পারেন। এটি একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে আরও জটিল লেআউট ডিজাইন করতে সাহায্য করে।

উদাহরণ:

<div class="columns">
  <div class="column is-half">
    <div class="columns">
      <div class="column">
        <p>Nested Column 1</p>
      </div>
      <div class="column">
        <p>Nested Column 2</p>
      </div>
    </div>
  </div>
  <div class="column">
    <p>This is a regular column.</p>
  </div>
</div>

এখানে প্রথম কলামে দুটি নেস্টেড কলাম রয়েছে, যা আবার Bulma এর গ্রিড সিস্টেমে সাজানো।

সারাংশ

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

Bulma CSS ফ্রেমওয়ার্কে Columns এবং Rows ব্যবহার করে খুব সহজে রেসপনসিভ গ্রিড লেআউট তৈরি করা যায়। Bulma এর গ্রিড সিস্টেম flexbox এর উপর ভিত্তি করে কাজ করে, যা ওয়েবসাইটের লেআউট ডিজাইনকে আরও সাচ্ছন্দ্যময় এবং রেসপনসিভ করে তোলে। এখানে Columns এবং Rows এর ব্যবহারের বিভিন্ন দিক আলোচনা করা হলো।

১. Columns এবং Rows কী?

• Columns: Bulma তে columns একটি ডিভ (div) এলিমেন্ট, যার মধ্যে এক বা একাধিক column থাকে। প্রতিটি column এলিমেন্টের মধ্যে কনটেন্ট থাকে এবং এগুলো বিভিন্ন সাইজে হতে পারে, যেমন: is-half, is-one-third, is-full ইত্যাদি।
• Rows: Bulma তে সরাসরি rows ব্যবহার করার কোনো নির্দিষ্ট ক্লাস নেই, তবে columns গ্রুপ করার মাধ্যমে একটি row তৈরি করা যায়। অর্থাৎ, প্রতিটি column একটি row এর অংশ হতে পারে, এবং columns এলিমেন্টটি সম্পূর্ণ রূপে একটি row হিসাবে কাজ করে।

২. Columns তৈরি করা

Bulma তে columns তৈরি করতে আপনাকে <div> ট্যাগ ব্যবহার করতে হবে, যার মধ্যে columns ক্লাস যোগ করতে হবে। প্রতিটি column এর জন্য একটি আলাদা <div> ব্যবহার করতে হয়।

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

<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 class="column">
    <div class="box">
      <p>Column 3</p>
    </div>
  </div>
</div>

এই কোডে তিনটি column তৈরি করা হয়েছে, এবং প্রতিটি column একটি box ট্যাগে কনটেন্ট ধারণ করছে। columns এলিমেন্টটি তাদের মধ্যে যথাযথ ফ্লেক্সবক্স সিস্টেম প্রয়োগ করবে।

৩. Column সাইজ কাস্টমাইজ করা

Bulma তে আপনি column এর সাইজ কাস্টমাইজ করতে পারবেন। এর জন্য আপনাকে is-one-quarter, is-half, is-three-quarters, is-full ইত্যাদি ক্লাস ব্যবহার করতে হবে। এই ক্লাসগুলো সাইজ পরিবর্তন করতে সাহায্য করে।

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

<div class="columns">
  <div class="column is-half">
    <div class="box">
      <p>Column 1 (50%)</p>
    </div>
  </div>
  <div class="column is-half">
    <div class="box">
      <p>Column 2 (50%)</p>
    </div>
  </div>
</div>

এখানে দুটি column রয়েছে এবং প্রতিটির সাইজ is-half ক্লাস ব্যবহার করে ৫০% করে দেয়া হয়েছে।

৪. Column Alignment

Bulma তে আপনি columns এর কনটেন্টকে align বা স্থানান্তর করতে পারেন। এর জন্য is-centered, is-right, is-offset-1, ইত্যাদি ক্লাস ব্যবহার করা হয়।

উদাহরণ: কনটেন্ট সেন্টারিং

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

এখানে is-centered ক্লাস ব্যবহার করে columns কে সেন্টারে রাখা হয়েছে। আপনি is-right ব্যবহার করেও কনটেন্টকে ডান দিকে স্থানান্তর করতে পারবেন।

৫. Column এর ভিতর Nested Columns

Bulma তে আপনি একটি column এর মধ্যে অন্য একটি columns তৈরি করতে পারেন। এটি nested columns নামে পরিচিত। এটি আপনাকে আরও জটিল লেআউট তৈরি করতে সাহায্য করে।

উদাহরণ: Nested Columns

<div class="columns">
  <div class="column is-half">
    <div class="box">
      <p>Column 1 (50%)</p>
      <div class="columns">
        <div class="column is-half">
          <div class="box">
            <p>Nested Column 1 (25%)</p>
          </div>
        </div>
        <div class="column is-half">
          <div class="box">
            <p>Nested Column 2 (25%)</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column is-half">
    <div class="box">
      <p>Column 2 (50%)</p>
    </div>
  </div>
</div>

এখানে একটি nested columns তৈরি করা হয়েছে, যেখানে প্রথম column এর মধ্যে দুটি nested column রয়েছে। প্রতিটি nested column এর সাইজ is-half ক্লাস দ্বারা ৫০% রাখা হয়েছে।

৬. Column Visibility

Bulma তে column এর visibility কন্ট্রোল করতে is-hidden ক্লাস ব্যবহার করা হয়। এটি ব্যবহার করে আপনি নির্দিষ্ট কলামগুলোকে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী скры隐藏 করতে পারেন।

উদাহরণ: Responsive Column Visibility

<div class="columns">
  <div class="column is-half is-hidden-mobile">
    <div class="box">
      <p>This column is hidden on mobile screens</p>
    </div>
  </div>
  <div class="column is-half">
    <div class="box">
      <p>This column is visible on all screens</p>
    </div>
  </div>
</div>

এখানে is-hidden-mobile ক্লাস ব্যবহার করা হয়েছে, যার ফলে প্রথম columnটি শুধুমাত্র ডেক্সটপ স্ক্রীনে দেখাবে এবং মোবাইল স্ক্রীনে লুকিয়ে যাবে।

৭. Columns এর মধ্যে Spacing

Bulma তে columns এর মধ্যে spacing (gutter) কাস্টমাইজ করার জন্য is-gapless এবং is-variable ক্লাস ব্যবহার করা হয়।

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

<div class="columns is-variable is-4">
  <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 class="column">
    <div class="box">
      <p>Column 3</p>
    </div>
  </div>
</div>

এখানে is-variable is-4 ক্লাসের মাধ্যমে columns এর মধ্যে spacing বা gap ৪ ইউনিটে সেট করা হয়েছে।

সারাংশ

Bulma এর columns এবং rows সিস্টেম ব্যবহার করে আপনি সহজেই রেসপনসিভ এবং আকর্ষণীয় ওয়েব লেআউট তৈরি করতে পারবেন। columns ক্লাস দিয়ে বিভিন্ন কলাম তৈরি করা যায় এবং এগুলোর সাইজ, alignment, visibility ইত্যাদি কাস্টমাইজ করা সম্ভব। nested columns এবং spacing নিয়ন্ত্রণের মাধ্যমে আরও জটিল লেআউট ডিজাইন করা যায়। Bulma এর flexbox ভিত্তিক গ্রিড সিস্টেম ওয়েব ডিজাইনে একটি শক্তিশালী টুল হিসেবে কাজ করে।

Bulma একটি আধুনিক এবং সিম্পল CSS ফ্রেমওয়ার্ক যা দ্বারা আপনি খুব সহজে রেসপনসিভ (responsive) ওয়েবসাইট ডিজাইন করতে পারবেন। রেসপনসিভ ডিজাইন হলো এমন ডিজাইন যা বিভিন্ন স্ক্রীন সাইজ এবং ডিভাইসে সঠিকভাবে প্রদর্শিত হয়। Bulma এর গ্রিড সিস্টেম এবং breakpoints আপনাকে এটি করতে সাহায্য করে। এই গাইডে Bulma এর responsive layouts এবং breakpoints সম্পর্কে বিস্তারিত আলোচনা করা হলো।

১. Bulma এর গ্রিড সিস্টেম

Bulma এর গ্রিড সিস্টেমের মাধ্যমে আপনি কনটেন্টকে সঠিকভাবে বিভিন্ন কলামে ভাগ করতে পারবেন। এটি ফ্লেক্সবক্স (Flexbox) এর উপর ভিত্তি করে কাজ করে, যা রেসপনসিভ ডিজাইনের জন্য খুবই উপযোগী। Bulma-এ columns এবং column ক্লাসের মাধ্যমে আপনি সহজেই গ্রিড তৈরি করতে পারেন।

উদাহরণ: Columns এবং Column ব্যবহার

<div class="columns">
  <div class="column is-one-quarter">
    <div class="box">
      Column 1 (25% width)
    </div>
  </div>
  <div class="column is-half">
    <div class="box">
      Column 2 (50% width)
    </div>
  </div>
  <div class="column is-one-quarter">
    <div class="box">
      Column 3 (25% width)
    </div>
  </div>
</div>

এখানে আমরা তিনটি কলাম তৈরি করেছি, যেখানে প্রথম এবং তৃতীয় কলামকে is-one-quarter (25%) প্রস্থ দেয়া হয়েছে, এবং দ্বিতীয় কলামটি is-half (50%) প্রস্থ পেয়েছে।

২. Bulma এর Breakpoints

Bulma এর breakpoints এর মাধ্যমে আপনি বিভিন্ন ডিভাইসে কন্টেন্টের আকার এবং লেআউট কাস্টমাইজ করতে পারেন। Bulma পাঁচটি প্রধান breakpoints সমর্থন করে:

1. mobile (0px এবং উপরে)
2. tablet (768px এবং উপরে)
3. desktop (1024px এবং উপরে)
4. widescreen (1216px এবং উপরে)
5. fullhd (1408px এবং উপরে)

Bulma এই breakpoints গুলোতে columns, containers, navbar, buttons ইত্যাদি উপাদান কাস্টমাইজ করার জন্য আপনাকে বিভিন্ন ক্লাস প্রদান করে।

৩. Breakpoint ব্যবহার করে গ্রিড লেআউট কাস্টমাইজ

Bulma-এ রেসপনসিভ ডিজাইনের জন্য breakpoints ব্যবহার করে আপনি কলামের আকার এবং ডিজাইন সহজেই পরিবর্তন করতে পারেন।

উদাহরণ: বিভিন্ন স্ক্রীনে ভিন্ন কলাম আকার

<div class="columns">
  <div class="column is-12-mobile is-6-tablet is-4-desktop">
    <div class="box">
      Column 1
    </div>
  </div>
  <div class="column is-12-mobile is-6-tablet is-4-desktop">
    <div class="box">
      Column 2
    </div>
  </div>
  <div class="column is-12-mobile is-6-tablet is-4-desktop">
    <div class="box">
      Column 3
    </div>
  </div>
</div>

এখানে, আমরা is-12-mobile, is-6-tablet, এবং is-4-desktop ক্লাস ব্যবহার করে কলামের আকার কাস্টমাইজ করেছি:

• mobile: সব কলাম পূর্ণ প্রস্থ (12টি কলাম)
• tablet: প্রতি কলাম ৬টি কলাম প্রস্থ
• desktop: প্রতি কলাম ৪টি কলাম প্রস্থ

এভাবে, কলামগুলো ছোট ডিভাইসে পূর্ণ প্রস্থ নেয় এবং বড় ডিভাইসে আকার ছোট হয়।

৪. Containers এবং Breakpoints

Bulma-এ আপনি container ক্লাস ব্যবহার করে কন্টেন্টের প্রস্থ সীমিত করতে পারেন, যাতে তা ছোট স্ক্রীনে পুরোপুরি দেখানো যায়।

উদাহরণ: Container ব্যবহার

<div class="container">
  <div class="columns">
    <div class="column">
      <div class="box">
        This is a responsive column inside a container.
      </div>
    </div>
  </div>
</div>

এখানে container ক্লাসটি ব্যবহার করা হয়েছে যাতে কন্টেন্টটির প্রস্থ বড় স্ক্রীনে সীমিত থাকে।

৫. Visibility Control

Bulma-এ আপনি বিভিন্ন breakpoints এর মাধ্যমে কোনো উপাদানকে দৃশ্যমান বা অদৃশ্য করতে পারেন। এর জন্য is-hidden এবং is-block ক্লাস ব্যবহার করা হয়।

উদাহরণ: Visibility Control

<div class="columns">
  <div class="column is-hidden-mobile">
    <div class="box">
      This column is hidden on mobile.
    </div>
  </div>
  <div class="column is-hidden-tablet">
    <div class="box">
      This column is hidden on tablet.
    </div>
  </div>
  <div class="column is-hidden-desktop">
    <div class="box">
      This column is hidden on desktop.
    </div>
  </div>
</div>

এখানে:

• is-hidden-mobile: মোবাইল ডিভাইসে এই কলামটি দেখা যাবে না।
• is-hidden-tablet: ট্যাবলেট ডিভাইসে এই কলামটি দেখা যাবে না।
• is-hidden-desktop: ডেস্কটপ ডিভাইসে এই কলামটি দেখা যাবে না।

৬. Bulma এর Flexbox ক্লাস

Bulma ফ্রেমওয়ার্ক Flexbox ব্যবহার করে, যার মাধ্যমে আপনি উপাদানগুলিকে লাইন-আপ এবং অবস্থান নির্ধারণ করতে পারেন। আপনি Flexbox ক্লাসগুলির মাধ্যমে justify-content, align-items এবং flex-wrap এর মতো প্রপার্টি নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: Flexbox এবং Justify Content

<div class="columns is-mobile is-centered">
  <div class="column is-3">
    <div class="box">
      Item 1
    </div>
  </div>
  <div class="column is-3">
    <div class="box">
      Item 2
    </div>
  </div>
  <div class="column is-3">
    <div class="box">
      Item 3
    </div>
  </div>
</div>

এখানে is-centered ক্লাস ব্যবহার করা হয়েছে, যা কলামগুলোকে সেন্টার আলাইন করবে, এবং is-mobile ক্লাসটি মোবাইল ডিভাইসে গ্রিড সিস্টেমের উপযুক্ত ব্যবস্থাপনা করে।

সারাংশ

Bulma ফ্রেমওয়ার্কের মাধ্যমে রেসপনসিভ লেআউট তৈরি করা খুবই সহজ। Bulma এর columns সিস্টেম এবং breakpoints ব্যবহারের মাধ্যমে আপনি আপনার ওয়েবসাইটকে বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত করতে পারবেন। is-mobile, is-tablet, is-desktop, এবং অন্যান্য ক্লাস ব্যবহার করে আপনি বিভিন্ন স্ক্রীন সাইজ অনুযায়ী কন্টেন্টের আকার এবং দৃশ্যমানতা কাস্টমাইজ করতে পারবেন। Bulma-র এই ফিচারগুলো রেসপনসিভ ওয়েব ডিজাইনকে আরও সহজ এবং কার্যকর করে তোলে।

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 এর এই গ্রিড সিস্টেমের মাধ্যমে আপনি আরো সহজে এবং দ্রুত প্রফেশনাল ডিজাইন তৈরি করতে পারবেন।

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

১. Vertical Alignment (উল্লম্ব সাঁকো)

Bulma তে কলামগুলোর মধ্যে উপাদানকে উল্লম্বভাবে align করার জন্য is-vcentered ক্লাস ব্যবহার করা হয়। এটি মূলত কলামের উপাদানগুলোকে উল্লম্বভাবে মধ্যভাগে বসানোর জন্য ব্যবহৃত হয়।

উদাহরণ: Vertical Alignment

<div class="columns is-vcentered">
  <div class="column">
    <div class="box">
      <p>This content is vertically centered.</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p>This content is also vertically centered.</p>
    </div>
  </div>
</div>

এখানে columns is-vcentered ক্লাস ব্যবহার করা হয়েছে, যা কলামগুলোর উপাদানগুলিকে উল্লম্বভাবে মাঝখানে সেন্টার করবে।

• columns: কলামগুলির একটি কন্টেইনার।
• is-vcentered: উল্লম্বভাবে কলামের উপাদানগুলো সেন্টার করে।

২. Column Offsets (কলাম অফসেট)

Bulma তে আপনি column offsets ব্যবহার করে একটি কলামকে নির্দিষ্ট পরিমাণে ডান বা বাম দিকে সরাতে পারেন। এটি is-offset-X ক্লাসের মাধ্যমে করা হয়, যেখানে X সংখ্যা দিয়ে আপনি কতটা অফসেট করতে চান তা নির্ধারণ করেন।

উদাহরণ: Column Offsets

<div class="columns">
  <div class="column is-4">
    <div class="box">
      <p>This is the first column with a width of 4.</p>
    </div>
  </div>
  <div class="column is-4 is-offset-4">
    <div class="box">
      <p>This is the second column, offset by 4 columns.</p>
    </div>
  </div>
</div>

এখানে is-offset-4 ক্লাসটি দ্বিতীয় কলামটিকে 4 কলাম বাম দিকে সরিয়ে দিয়েছে। এর ফলে প্রথম কলামটি 4 ইউনিট প্রস্থের, এবং দ্বিতীয় কলামটি 4 ইউনিট বাম দিকে সরানো।

• is-offset-X: X হলো কলামের জন্য ব্যবহৃত অফসেট সংখ্যা (যেমন is-offset-1, is-offset-2 ইত্যাদি)।

৩. Vertical Alignment এবং Offsetting Columns একসাথে ব্যবহার করা

Bulma তে আপনি উল্লম্বভাবে সেন্টারিং এবং কলাম অফসেট একসাথে ব্যবহার করতে পারেন, যাতে আরও গতিশীল এবং কাস্টম লেআউট তৈরি করা যায়।

উদাহরণ: Vertical Alignment এবং Column Offsetting একসাথে

<div class="columns is-vcentered">
  <div class="column is-4 is-offset-2">
    <div class="box">
      <p>This content is vertically centered and the column is offset by 2 columns.</p>
    </div>
  </div>
  <div class="column is-4">
    <div class="box">
      <p>This content is also vertically centered.</p>
    </div>
  </div>
</div>

এখানে প্রথম কলামটি 2 কলাম বাম দিকে সরানো হয়েছে is-offset-2 ক্লাস ব্যবহার করে, এবং is-vcentered ক্লাসের মাধ্যমে কলামের উপাদানগুলো উল্লম্বভাবে সেন্টার করা হয়েছে।

৪. বিভিন্ন Column Offsets এবং Vertical Alignment এর প্রয়োগ

Bulma তে offsets ব্যবহার করতে গেলে কলামের মোট প্রস্থ 12 ইউনিটের মধ্যে সীমাবদ্ধ থাকে। সুতরাং, আপনি কোনো কলামকে মোট 12 ইউনিটের মধ্যে সরাতে পারবেন। উদাহরণস্বরূপ, আপনি যদি কলামকে 6 ইউনিট অফসেট করতে চান, তবে is-offset-6 ব্যবহার করবেন।

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

<div class="columns">
  <div class="column is-3 is-offset-3">
    <div class="box">
      <p>This column is 3 units wide and offset by 3 units.</p>
    </div>
  </div>
  <div class="column is-6 is-offset-0">
    <div class="box">
      <p>This column is 6 units wide and has no offset.</p>
    </div>
  </div>
</div>

এখানে প্রথম কলামটি 3 ইউনিট প্রস্থ এবং 3 ইউনিট অফসেট হয়ে রয়েছে। দ্বিতীয় কলামটির কোনো অফসেট নেই এবং এটি 6 ইউনিট প্রস্থের।

সারাংশ

Bulma তে Vertical Alignment এবং Column Offsetting ব্যবহার করে আপনি সহজেই রেসপনসিভ এবং কাস্টম লেআউট তৈরি করতে পারেন। is-vcentered ক্লাস কলামের উপাদানগুলোকে উল্লম্বভাবে সেন্টার করতে সাহায্য করে, এবং is-offset-X ক্লাস কলামকে নির্দিষ্ট পরিমাণে সরানোর জন্য ব্যবহৃত হয়। এই কৌশলগুলোর মাধ্যমে আপনি আপনার ওয়েব ডিজাইনকে আরও উন্নত এবং সহজে কাস্টমাইজ করতে পারবেন।