Vertical এবং Horizontal Alignment Techniques

Bulma CSS ফ্রেমওয়ার্ক Flexbox-কে ব্যবহার করে Vertical এবং Horizontal Alignment সহজ এবং কার্যকরভাবে সম্পাদন করতে সক্ষম। Bulma এর Flexbox সিস্টেম ব্যবহার করে যে কোনো কন্টেন্টকে এক বা একাধিক দিশায় সেন্টার, আলাইন বা ডিসট্রিবিউট করা সম্ভব।

এখানে আমরা Bulma ফ্রেমওয়ার্কে Vertical এবং Horizontal Alignment এর বিভিন্ন টেকনিক শিখবো।

১. Horizontal Alignment (বাম বা ডান দিকে সেন্টার করা)

Bulma এর Flexbox সিস্টেমের মাধ্যমে আপনি খুব সহজে কন্টেন্টকে অনুভূমিকভাবে (Horizontal) সেন্টার, বাম বা ডান দিকে অবস্থান করতে পারেন।

Horizontal Alignment: সেন্টারিং

<div class="columns is-centered">
  <div class="column is-half">
    <div class="box">
      This is horizontally centered.
    </div>
  </div>
</div>

এখানে:

• is-centered ক্লাসটি কলামের মধ্যে কন্টেন্টকে অনুভূমিকভাবে (horizontal) সেন্টার করে।
• column is-half কন্টেন্টের সাইজ নির্ধারণ করে, এখানে এটি স্ক্রীনের অর্ধেক জায়গা নিবে।

Horizontal Alignment: বাম এবং ডান দিকে সেন্টার করা

<div class="columns">
  <div class="column">
    <div class="box">
      Left-aligned content.
    </div>
  </div>
  <div class="column has-text-right">
    <div class="box">
      Right-aligned content.
    </div>
  </div>
</div>

এখানে:

• has-text-right ক্লাসটি কন্টেন্টকে ডানদিকে সেন্টার করেছে।
• সাধারণভাবে, Bulma এর কলামগুলি বাম দিকে এলাইন থাকে।

২. Vertical Alignment (উল্লম্বভাবে সেন্টার করা)

Bulma এর Flexbox সিস্টেমের মাধ্যমে, আপনি কন্টেন্টকে উল্লম্বভাবে (Vertical) সেন্টার করতে পারবেন, যেমন টেক্সট বা ইমেজ সেন্টার করা।

Vertical Alignment: সেন্টারিং

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

এখানে:

• is-vcentered ক্লাসটি কলামের মধ্যে কন্টেন্টকে উল্লম্বভাবে (vertical) সেন্টার করে।
• এটি খুবই উপকারী যখন আপনার কন্টেন্টের উচ্চতা ভিন্ন হতে পারে এবং আপনি সব কন্টেন্ট একসাথে সেন্টার করতে চান।

Vertical Alignment: টেক্সট সেন্টার করা

<div class="columns is-vcentered">
  <div class="column is-half">
    <div class="box has-text-centered">
      Vertically and horizontally centered text.
    </div>
  </div>
</div>

এখানে:

• has-text-centered ক্লাসটি টেক্সটকে অনুভূমিকভাবে সেন্টার করেছে।
• is-vcentered ক্লাসটি কন্টেন্টকে উল্লম্বভাবে সেন্টার করেছে।

৩. Both Vertical and Horizontal Alignment (দুটি দিকেই সেন্টারিং)

Bulma এর Flexbox ক্লাসগুলি ব্যবহার করে আপনি খুব সহজেই কন্টেন্টকে উভয় দিক (vertical এবং horizontal) সেন্টার করতে পারেন। এটি সাধারণত পেজের সেন্টারে কন্টেন্ট বা পপ-আপ উইন্ডো পজিশন করতে ব্যবহৃত হয়।

Both Alignment: সেন্টারিং

<div class="columns is-vcentered is-centered">
  <div class="column">
    <div class="box">
      This content is centered both vertically and horizontally.
    </div>
  </div>
</div>

এখানে:

• is-centered ক্লাসটি কন্টেন্টকে অনুভূমিকভাবে সেন্টার করেছে।
• is-vcentered ক্লাসটি কন্টেন্টকে উল্লম্বভাবে সেন্টার করেছে।

৪. Flexbox Align Items (ইনডিভিজুয়াল কন্টেন্ট এলাইনমেন্ট)

Bulma ফ্রেমওয়ার্কে Flexbox এর align-items এবং justify-content পদ্ধতি ব্যবহার করে আপনি ইনডিভিজুয়াল কন্টেন্টকে নিয়ন্ত্রণ করতে পারেন।

Align Items: শুরু, সেন্টার, শেষ

<div class="columns is-flex is-align-items-start">
  <div class="column">
    <div class="box">
      Align at the start (top).
    </div>
  </div>
</div>

<div class="columns is-flex is-align-items-center">
  <div class="column">
    <div class="box">
      Align at the center.
    </div>
  </div>
</div>

<div class="columns is-flex is-align-items-end">
  <div class="column">
    <div class="box">
      Align at the end (bottom).
    </div>
  </div>
</div>

এখানে:

• is-align-items-start কন্টেন্টকে উপরের দিকে (top) সেন্টার করেছে।
• is-align-items-center কন্টেন্টকে সেন্টার করেছে (উল্লম্বভাবে)।
• is-align-items-end কন্টেন্টকে নিচে (bottom) সেন্টার করেছে।

৫. Justify Content (অনুভূমিক স্পেসিং)

Flexbox এর justify-content সিস্টেম ব্যবহার করে আপনি কন্টেন্টকে অনুভূমিকভাবে (horizontal) সমানভাবে সজ্জিত করতে পারেন। এটি কন্টেন্টের মধ্যে এক ধরনের ফাঁকা জায়গা যোগ করে।

Justify Content: স্পেস-বিটুইন

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

এখানে:

• is-justify-content-space-between কন্টেন্টের মধ্যে সমান জায়গা রেখে তা সজ্জিত করেছে।
• is-justify-content-center ক্লাসটি কন্টেন্টকে সেন্টারে নিয়ে আসবে।

৬. Align Self (ইনডিভিজুয়াল এলাইনমেন্ট)

Bulma এর align-self ক্লাস ব্যবহার করে আপনি প্রতিটি উপাদানকে Flexbox কনটেইনারের মধ্যে ইনডিভিজুয়ালি সেন্টার বা সজ্জিত করতে পারেন। এটি ঐ উপাদানটির জন্য align-items এর বৈশিষ্ট্যটি সেট করবে।

Align Self: ইনডিভিজুয়াল কন্টেন্ট এলাইনমেন্ট

<div class="columns is-flex">
  <div class="column is-align-self-start">
    <div class="box">
      Align this item to the start.
    </div>
  </div>
  <div class="column is-align-self-center">
    <div class="box">
      Align this item to the center.
    </div>
  </div>
  <div class="column is-align-self-end">
    <div class="box">
      Align this item to the end.
    </div>
  </div>
</div>

এখানে:

• is-align-self-start, is-align-self-center, এবং is-align-self-end ক্লাসগুলো প্রতিটি উপাদানকে আলাদা আলাদা ভাবে শুরু, সেন্টার বা শেষ দিকে সজ্জিত করেছে।

সারাংশ

Bulma ফ্রেমওয়ার্কে Vertical এবং Horizontal Alignment টেকনিক ব্যবহার করে আপনি খুব সহজেই কন্টেন্টকে সেন্টার, বাম বা ডান দিকে আলাইন করতে পারেন। Flexbox এর ব্যবহার ও ক্লাসগুলি যেমন is-centered, is-vcentered, is-align-items-start, is-align-self-center ইত্যাদি বিভিন্ন কন্টেন্ট এলাইনমেন্টের জন্য একে অপরের সাথে মিশ্রিত হয়ে কাজ করে, যা একটি সিম্পল ও কার্যকরী লেআউট সিস্টেম তৈরি করতে সহায়তা করে।