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 ক্লাস কলামকে নির্দিষ্ট পরিমাণে সরানোর জন্য ব্যবহৃত হয়। এই কৌশলগুলোর মাধ্যমে আপনি আপনার ওয়েব ডিজাইনকে আরও উন্নত এবং সহজে কাস্টমাইজ করতে পারবেন।
Read more
