Bulma এর Helper Classes

Bulma CSS ফ্রেমওয়ার্কটি অনেক ধরনের helper classes প্রদান করে, যা ডেভেলপারদের দ্রুত এবং সহজভাবে ওয়েব পেজের ডিজাইন কাস্টমাইজ করতে সহায়তা করে। এই helper classes গুলি ছোট কাজগুলো সম্পাদন করতে ব্যবহৃত হয়, যেমন মার্জিন, প্যাডিং, ফন্ট সাইজ, কালার, ডিসপ্লে স্টাইল, আ্যলাইমেন্ট, ইত্যাদি। এসব ক্লাস ব্যবহার করে আপনি আপনার HTML কোডে স্টাইলিং পরিবর্তন করতে পারেন, এবং এটি কোডের পরিমাণ কমাতে সহায়তা করে।

এই গাইডে, আমরা Bulma এর Helper Classes গুলির বিভিন্ন দিক নিয়ে আলোচনা করবো।

১. Bulma এর Helper Classes এর মূল সুবিধা

Helper classes ব্যবহারের মাধ্যমে কিছু সাধারণ স্টাইলিং কাজ সহজেই করা যায়, যেমন:

• Margin এবং Padding সেট করা
• Display প্রপার্টি কাস্টমাইজ করা
• Text alignment এবং Positioning কন্ট্রোল করা
• Background color এবং Text color পরিবর্তন করা
• Flexbox এবং Grid এর বিভিন্ন বৈশিষ্ট্য পরিবর্তন করা

Bulma এর helper classes ব্যবহার করলে কোডে অনেক সময় বাঁচানো যায় এবং সোজা ফলাফল পাওয়া যায়, যেটি সাধারণ CSS স্টাইলিং থেকে অনেক দ্রুত হয়।

২. Margin এবং Padding

Bulma-তে margin (মার্জিন) এবং padding (প্যাডিং) সেট করার জন্য সরাসরি helper classes ব্যবহার করা যায়। এদের মাধ্যমে বিভিন্ন দিক থেকে মার্জিন ও প্যাডিং অ্যাড বা রিমুভ করা সম্ভব।

উদাহরণ:

<div class="m-5">This div has a margin of 5 units</div>
<div class="p-3">This div has padding of 3 units</div>

Bulma এ আপনি:

• m-{value}: মার্জিন সেট করার জন্য (যেমন m-5 পুরো ডিভের চারপাশে মার্জিন)
• p-{value}: প্যাডিং সেট করার জন্য (যেমন p-3 পুরো ডিভের চারপাশে প্যাডিং)

এছাড়াও, আপনি নির্দিষ্ট দিকের জন্য আলাদা মার্জিন ও প্যাডিং দিতে পারেন:

• mt-{value}: Top margin
• mr-{value}: Right margin
• mb-{value}: Bottom margin
• ml-{value}: Left margin
• pt-{value}: Top padding
• pr-{value}: Right padding
• pb-{value}: Bottom padding
• pl-{value}: Left padding

৩. Text Alignment এবং Color

Text alignment এবং text color পরিবর্তন করতে Bulma সহজ helper classes প্রদান করে।

উদাহরণ:

<div class="has-text-centered">This text is centered.</div>
<div class="has-text-right">This text is aligned to the right.</div>
<div class="has-text-left">This text is aligned to the left.</div>

<div class="has-text-primary">This text has primary color.</div>
<div class="has-text-danger">This text has a danger color.</div>

এখানে:

• has-text-centered: টেক্সটকে সেন্টারে আলাইন করবে।
• has-text-right: টেক্সটকে ডান দিকে আলাইন করবে।
• has-text-left: টেক্সটকে বাম দিকে আলাইন করবে।
• has-text-primary: প্রাইমারি রঙে টেক্সট।
• has-text-danger: ডেঞ্জার রঙে টেক্সট।

Bulma এ আরো অনেক text colors ক্লাস আছে, যেমন has-text-success, has-text-info, has-text-warning, has-text-link ইত্যাদি।

৪. Display Properties

Display প্রপার্টি নিয়ন্ত্রণ করতে Bulma এ helper classes আছে, যেগুলি বিশেষভাবে ওয়েব পেজের উপাদানগুলোকে শো বা হাইড করার জন্য ব্যবহৃত হয়। এই ক্লাসগুলো ব্যবহার করে আপনি ডিভ, প্যারাগ্রাফ বা অন্যান্য উপাদানগুলোর display type পরিবর্তন করতে পারবেন।

উদাহরণ:

<div class="is-hidden-mobile">This will be hidden on mobile devices.</div>
<div class="is-block">This will be displayed as a block element.</div>
<div class="is-inline">This will be displayed inline.</div>

এখানে:

• is-hidden-mobile: মোবাইল ডিভাইসে উপাদানটি হাইড করবে।
• is-block: উপাদানটি ব্লক এলিমেন্ট হিসেবে প্রদর্শন করবে।
• is-inline: উপাদানটি ইনলাইন এলিমেন্ট হিসেবে প্রদর্শন করবে।

৫. Positioning এবং Flexbox Helper Classes

Bulma তে positioning এবং flexbox এর জন্য বেশ কিছু helper classes রয়েছে যা দিয়ে আপনি উপাদানগুলোর অবস্থান বা বিন্যাস নিয়ন্ত্রণ করতে পারেন।

উদাহরণ:

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

এখানে:

• is-flex: উপাদানকে ফ্লেক্স কনটেইনার হিসেবে সাজাবে।
• is-justify-content-center: উপাদানগুলোকে কন্টেইনারের কেন্দ্রে সেন্টার করবে।

আরও উদাহরণ:

<div class="is-flex is-align-items-center">
  <div class="box">Vertically Centered Box</div>
</div>

এখানে:

• is-align-items-center: উপাদানগুলোকে উল্লম্বভাবে (vertically) সেন্টার করবে।

Bulma তে আরও অনেক ফ্লেক্সবক্স ক্লাস রয়েছে, যেমন is-flex-direction-column, is-align-items-flex-start, is-justify-content-space-between ইত্যাদি।

৬. Background Color এবং Opacity

Background color এবং opacity নিয়ন্ত্রণ করার জন্য Bulma এর helper classes ব্যবহার করা যেতে পারে।

উদাহরণ:

<div class="has-background-primary">This div has a primary background color.</div>
<div class="has-background-light">This div has a light background color.</div>
<div class="has-background-grey-dark">This div has a dark grey background color.</div>

এখানে:

• has-background-primary: প্রাইমারি ব্যাকগ্রাউন্ড রঙ।
• has-background-light: লাইট ব্যাকগ্রাউন্ড রঙ।
• has-background-grey-dark: ডার্ক গ্রে ব্যাকগ্রাউন্ড রঙ।

এছাড়া, opacity পরিবর্তন করতে Bulma এ has-opacity-{value} ক্লাসও রয়েছে।

৭. Border Radius এবং Box Shadow

Bulma এর helper classes ব্যবহার করে আপনি সহজে উপাদানের কোণের রেডিয়াস এবং শ্যাডো অ্যাড করতে পারেন।

উদাহরণ:

<div class="box is-rounded">This box has rounded corners.</div>
<div class="box is-shadowless">This box has no shadow.</div>

এখানে:

• is-rounded: উপাদানের কোণগুলিকে রাউন্ড (round) করবে।
• is-shadowless: উপাদানটির কোনো শ্যাডো থাকবে না।

সারাংশ

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

Bulma CSS ফ্রেমওয়ার্কে spacing utilities ব্যবহার করে আপনি সহজেই বিভিন্ন উপাদানের মধ্যে margin (বাহ্যিক ফাঁকা জায়গা) এবং padding (অভ্যন্তরীণ ফাঁকা জায়গা) কাস্টমাইজ করতে পারেন। এটি আপনাকে দ্রুত এবং কার্যকরভাবে আপনার ডিজাইনে ব্যবধান নির্ধারণ করতে সাহায্য করে।

Bulma তে spacing utilities বিশেষভাবে m, p, mx, my, px, এবং py ক্লাসগুলোর মাধ্যমে ব্যবহৃত হয়, যা margin এবং padding এর বিভিন্ন দিক নিয়ন্ত্রণ করতে পারে। এই ক্লাসগুলো বিভিন্ন ফাঁকা জায়গা (spacing) নির্ধারণে খুবই সহায়ক।

১. Margin Utilities

Margin হলো দুটি উপাদানের মধ্যে বাহ্যিক ফাঁকা জায়গা। Bulma তে m ক্লাস ব্যবহার করে আপনি সহজেই margin প্রয়োগ করতে পারেন। আপনি বিভিন্ন দিকে (top, right, bottom, left) margin অ্যাপ্লাই করতে পারেন।

Margin ব্যবহারের উদাহরণ:

• m-{size}: পুরো উপাদানের চারপাশে margin।
• mt-{size}: উপাদানের উপরে margin।
• mr-{size}: উপাদানের ডানদিকে margin।
• mb-{size}: উপাদানের নিচে margin।
• ml-{size}: উপাদানের বামে margin।
• mx-{size}: উপাদানের বাম এবং ডানদিকে margin।
• my-{size}: উপাদানের উপরে এবং নিচে margin।

উদাহরণ: Margin প্রয়োগ করা

<div class="box m-4">
  <p>This box has a margin of 4 units on all sides.</p>
</div>

<div class="box mt-5 mb-3">
  <p>This box has margin of 5 units on top and 3 units on bottom.</p>
</div>

এখানে:

• m-4: এই ক্লাসটি উপাদানের চারপাশে ৪ ইউনিট margin যোগ করবে।
• mt-5: উপাদানের উপরে ৫ ইউনিট margin যোগ করবে।
• mb-3: উপাদানের নিচে ৩ ইউনিট margin যোগ করবে।

Bulma এ margin এর সাইজ সাধারণত 0 থেকে 6 পর্যন্ত হয়ে থাকে, এবং এগুলো বিভিন্ন রকমের spacing প্রদান করে।

২. Padding Utilities

Padding হলো উপাদানের অভ্যন্তরীণ ফাঁকা জায়গা, যা উপাদানের কনটেন্টের চারপাশে অবস্থান করে। Bulma তে p ক্লাস ব্যবহার করে আপনি padding নিয়ন্ত্রণ করতে পারেন। এর মধ্যে বিভিন্ন দিকের padding কাস্টমাইজ করা সম্ভব।

Padding ব্যবহারের উদাহরণ:

• p-{size}: পুরো উপাদানের চারপাশে padding।
• pt-{size}: উপাদানের উপরে padding।
• pr-{size}: উপাদানের ডানদিকে padding।
• pb-{size}: উপাদানের নিচে padding।
• pl-{size}: উপাদানের বামে padding।
• px-{size}: উপাদানের বাম এবং ডানদিকে padding।
• py-{size}: উপাদানের উপরে এবং নিচে padding।

উদাহরণ: Padding প্রয়োগ করা

<div class="box p-4">
  <p>This box has padding of 4 units on all sides.</p>
</div>

<div class="box pt-5 pb-3">
  <p>This box has padding of 5 units on top and 3 units on bottom.</p>
</div>

এখানে:

• p-4: এই ক্লাসটি উপাদানের চারপাশে ৪ ইউনিট padding যোগ করবে।
• pt-5: উপাদানের উপরে ৫ ইউনিট padding যোগ করবে।
• pb-3: উপাদানের নিচে ৩ ইউনিট padding যোগ করবে।

৩. Negative Margin

Bulma তে আপনি negative margin ব্যবহারের মাধ্যমে উপাদানগুলিকে একে অপরের মধ্যে আরও ঘনিষ্ঠভাবে রাখতে পারেন। এর মাধ্যমে আপনি উপাদানগুলির অবস্থান নিয়ন্ত্রণ করতে পারেন যাতে এগুলি একে অপরের মধ্যে কিছুটা overlap করতে পারে।

Negative Margin ব্যবহারের উদাহরণ:

<div class="box m-4">
  <p>This box has a margin of 4 units.</p>
</div>

<div class="box m-n4">
  <p>This box has a negative margin of 4 units, bringing it closer to the previous box.</p>
</div>

এখানে, m-n4 ক্লাসটি negative margin অ্যাপ্লাই করবে, যার ফলে এই উপাদানটি পূর্ববর্তী উপাদানের কাছাকাছি চলে আসবে।

৪. Auto Margin

Bulma তে m-auto ক্লাস ব্যবহার করে আপনি উপাদানকে স্বয়ংক্রিয়ভাবে (auto) সেন্টার করতে পারেন। এটি সাধারণত display: block এর সাথে ব্যবহৃত হয় এবং উপাদানটিকে পিতামাতার উপাদান (parent element) এর মাঝখানে স্থাপন করে।

উদাহরণ: Auto Margin

<div class="box m-auto" style="width: 200px;">
  <p>This box is horizontally centered using margin-auto.</p>
</div>

এখানে, m-auto ক্লাসটি উপাদানটিকে পিতামাতার উপাদানের মধ্যে সেন্টার করে।

৫. Spacing Utilities: Responsive Spacing

Bulma তে responsive spacing utilities এর মাধ্যমে আপনি বিভিন্ন স্ক্রীন সাইজে উপাদানের margin এবং padding কাস্টমাইজ করতে পারেন। এর জন্য is-mobile, is-tablet, is-desktop ইত্যাদি ক্লাস ব্যবহার করা হয়।

উদাহরণ: Responsive Margin এবং Padding

<div class="box m-4 m-mobile-2 m-tablet-3 m-desktop-5">
  <p>This box has different margin values on different screen sizes.</p>
</div>

এখানে:

• m-4: ডিফল্ট margin।
• m-mobile-2: মোবাইল স্ক্রীনে ২ ইউনিট margin।
• m-tablet-3: ট্যাবলেট স্ক্রীনে ৩ ইউনিট margin।
• m-desktop-5: ডেস্কটপ স্ক্রীনে ৫ ইউনিট margin।

এই কৌশলটি আপনার ডিজাইনকে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে প্রদর্শন করতে সাহায্য করে।

সারাংশ

Bulma তে spacing utilities ব্যবহারের মাধ্যমে আপনি সহজেই margin এবং padding নিয়ন্ত্রণ করতে পারেন। m এবং p ক্লাসগুলোর মাধ্যমে margin এবং padding এর বিভিন্ন দিক কাস্টমাইজ করা সম্ভব, যেমন top, bottom, left, এবং right। এছাড়া, negative margin এবং auto margin ব্যবহার করে আপনি উপাদানগুলির অবস্থান নিয়ন্ত্রণ করতে পারেন। রেসপনসিভ ডিজাইনের জন্য responsive spacing ক্লাসও প্রদান করা হয়েছে, যা আপনার ওয়েব পেজের বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত spacing তৈরি করতে সাহায্য করবে।

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

১. Responsive Text Alignment

Text Alignment কনফিগারেশন দ্বারা আপনি আপনার টেক্সটের অবস্থান (alignment) পরিবর্তন করতে পারেন। Bulma তে টেক্সটের বিভিন্ন অবস্থান যেমন center, left, right ইত্যাদি খুব সহজেই অ্যাপ্লাই করা যায়।

বেসিক টেক্সট এলাইনমেন্ট:

<div class="content">
  <p class="has-text-left">This is a left-aligned text.</p>
  <p class="has-text-centered">This is a center-aligned text.</p>
  <p class="has-text-right">This is a right-aligned text.</p>
</div>

এখানে:

• has-text-left: টেক্সটকে বাম দিকে এলাইন করে।
• has-text-centered: টেক্সটকে কেন্দ্রীয় ভাবে এলাইন করে।
• has-text-right: টেক্সটকে ডান দিকে এলাইন করে।

Responsive Text Alignment:

Bulma তে responsive text alignment ব্যবহার করতে, আপনি বিভিন্ন স্ক্রীনের জন্য আলাদা আলাদা এলাইনমেন্ট নির্ধারণ করতে পারেন। উদাহরণস্বরূপ, মোবাইল স্ক্রীনে টেক্সট সেন্টার করতে এবং বড় স্ক্রীনে টেক্সট বাম দিকে এলাইন করতে:

<div class="content">
  <p class="has-text-left is-size-4-mobile has-text-centered-desktop">Responsive Text Alignment</p>
</div>

এখানে:

• is-size-4-mobile: মোবাইল স্ক্রীনে টেক্সটের আকার ছোট থাকবে।
• has-text-centered-desktop: ডেস্কটপ স্ক্রীনে টেক্সট সেন্টার অবস্থানে থাকবে।

২. Text Size কনফিগারেশন

Bulma তে টেক্সটের আকার পরিবর্তন করার জন্য বিভিন্ন সাইজ ক্লাস আছে। আপনি টেক্সটের আকার সরাসরি নির্ধারণ করতে পারেন যেমন is-size-1, is-size-2, is-size-3 ইত্যাদি।

টেক্সট সাইজ কনফিগারেশন:

<div class="content">
  <p class="is-size-1">This is size 1 text</p>
  <p class="is-size-2">This is size 2 text</p>
  <p class="is-size-3">This is size 3 text</p>
  <p class="is-size-4">This is size 4 text</p>
  <p class="is-size-5">This is size 5 text</p>
  <p class="is-size-6">This is size 6 text</p>
</div>

এখানে:

• is-size-1: সবচেয়ে বড় টেক্সট আকার।
• is-size-6: সবচেয়ে ছোট টেক্সট আকার।

Responsive Text Size:

Bulma তে আপনি বিভিন্ন স্ক্রীন সাইজের জন্য আলাদা টেক্সট সাইজ কনফিগার করতে পারেন। উদাহরণস্বরূপ, মোবাইল স্ক্রীনে ছোট আকার এবং বড় স্ক্রীনে বড় আকারের টেক্সট:

<div class="content">
  <p class="is-size-4-mobile is-size-2-tablet">Responsive Text Size</p>
</div>

এখানে:

• is-size-4-mobile: মোবাইল স্ক্রীনে টেক্সট আকার ছোট।
• is-size-2-tablet: ট্যাবলেট বা বড় স্ক্রীনে টেক্সট আকার বড়।

৩. Font Weight এবং Style কাস্টমাইজেশন

Bulma তে font weight এবং font style নিয়ন্ত্রণ করার জন্যও সহজ ক্লাস রয়েছে, যেগুলি টেক্সটের থিকনেস এবং স্টাইল পরিবর্তন করতে সাহায্য করে।

Font Weight উদাহরণ:

<p class="has-text-weight-bold">This text is bold.</p>
<p class="has-text-weight-light">This text is light.</p>
<p class="has-text-weight-normal">This text has normal weight.</p>

এখানে:

• has-text-weight-bold: টেক্সটকে বোল্ড করে।
• has-text-weight-light: টেক্সটকে হালকা (লাইট) করে।
• has-text-weight-normal: টেক্সটকে সাধারণ (নর্মাল) ওজন দেয়।

Font Style উদাহরণ:

<p class="has-text-italic">This text is italic.</p>
<p class="has-text-normal">This text is normal style.</p>

এখানে:

• has-text-italic: টেক্সটকে ইটালিক স্টাইলে পরিণত করে।
• has-text-normal: টেক্সটকে সাধারণ স্টাইলে রাখে।

৪. Additional Responsive Configurations

Bulma তে responsive text size এবং text alignment ক্লাসগুলো একে অপরের সাথে কাস্টমাইজ করার মাধ্যমে আপনি আরও পরিস্কার এবং দৃষ্টিনন্দন ওয়েব পেজ তৈরি করতে পারেন। নিচে একটি উদাহরণ দেয়া হয়েছে যেখানে একটি টেক্সট প্রথমে মোবাইলে ছোট আকারে এবং বড় স্ক্রীনে বড় আকারে প্রদর্শিত হবে।

<div class="content">
  <h1 class="is-size-5-mobile is-size-3-tablet is-size-1-desktop">Responsive Heading</h1>
  <p class="is-size-6-mobile is-size-4-tablet is-size-2-desktop">This text adjusts according to screen size.</p>
</div>

এখানে:

• is-size-5-mobile: মোবাইল স্ক্রীনে টেক্সট সাইজ ছোট।
• is-size-3-tablet: ট্যাবলেট স্ক্রীনে টেক্সট সাইজ মাঝারি।
• is-size-1-desktop: ডেস্কটপ স্ক্রীনে টেক্সট সাইজ সবচেয়ে বড়।

সারাংশ

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

Bulma ফ্রেমওয়ার্কের Color Helper Classes আপনাকে সহজে এবং দ্রুত রঙ কাস্টমাইজ করতে সাহায্য করে। এগুলি বিশেষভাবে টেক্সট, ব্যাকগ্রাউন্ড, বর্ডার এবং অন্যান্য উপাদানের জন্য ব্যবহার করা হয়। Bulma এর Color Helper Classes-এর মাধ্যমে আপনি দ্রুত সাইটের ডিজাইন পরিবর্তন করতে পারেন, যেমন বাটন, টেক্সট, ব্যাকগ্রাউন্ড ইত্যাদির রঙ বদলানো।

Bulma এর Color Helper Classes এর সাধারণ বৈশিষ্ট্য

• ব্যাকগ্রাউন্ড রঙ পরিবর্তন: বিভিন্ন এলিমেন্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে সাহায্য করে।
• টেক্সট রঙ পরিবর্তন: টেক্সটের রঙ পরিবর্তন করতে সাহায্য করে।
• বর্ডার রঙ পরিবর্তন: বর্ডার স্টাইল কাস্টমাইজ করতে সাহায্য করে।
• রঙের শেড: Bulma বিভিন্ন রঙের শেড প্রদান করে, যেমন: is-light, is-dark, is-primary, is-info, is-warning ইত্যাদি।

১. ব্যাকগ্রাউন্ড রঙের জন্য Color Helper Classes

Bulma বিভিন্ন রঙের ব্যাকগ্রাউন্ড পরিবর্তনের জন্য বিশেষ ক্লাস প্রদান করে। আপনি যেকোনো এলিমেন্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে এই ক্লাসগুলো ব্যবহার করতে পারেন।

ব্যাকগ্রাউন্ড রঙের জন্য উদাহরণ:

<div class="has-background-primary">
  <p class="has-text-white">This is a div with a primary background color.</p>
</div>

<div class="has-background-info">
  <p class="has-text-white">This is a div with an info background color.</p>
</div>

এখানে:

• has-background-primary: প্রাইমারি ব্যাকগ্রাউন্ড রঙ ব্যবহার করবে।
• has-background-info: ইনফো ব্যাকগ্রাউন্ড রঙ ব্যবহার করবে।
• has-text-white: টেক্সটের রঙ সাদা (white) করে দেবে।

অন্যান্য ব্যাকগ্রাউন্ড রঙ:

• has-background-light: হালকা ব্যাকগ্রাউন্ড
• has-background-dark: অন্ধকার ব্যাকগ্রাউন্ড
• has-background-link: লিঙ্ক ব্যাকগ্রাউন্ড

২. টেক্সট রঙ পরিবর্তন

Bulma আপনাকে বিভিন্ন রঙের টেক্সট স্টাইল পরিবর্তন করতে সহায়তা করে। আপনি has-text-* ক্লাস ব্যবহার করে টেক্সটের রঙ পরিবর্তন করতে পারবেন।

টেক্সট রঙের জন্য উদাহরণ:

<p class="has-text-primary">This is a paragraph with primary text color.</p>
<p class="has-text-info">This is a paragraph with info text color.</p>
<p class="has-text-danger">This is a paragraph with danger text color.</p>

এখানে:

• has-text-primary: টেক্সট রঙ প্রাইমারি (primary) রঙে থাকবে।
• has-text-info: টেক্সট রঙ ইনফো (info) রঙে থাকবে।
• has-text-danger: টেক্সট রঙ ডেঞ্জার (danger) রঙে থাকবে।

অন্যান্য টেক্সট রঙ:

• has-text-success: সাফল্য রঙ
• has-text-warning: সতর্কতা রঙ
• has-text-link: লিঙ্ক রঙ
• has-text-light: হালকা রঙ
• has-text-dark: অন্ধকার রঙ

৩. বর্ডার রঙ পরিবর্তন

Bulma এর border ক্লাস ব্যবহার করে আপনি বর্ডারের রঙও পরিবর্তন করতে পারেন। এটি খুবই কার্যকরী যখন আপনি কোনো উপাদানের চারপাশে বর্ডার দিতে চান।

বর্ডার রঙ পরিবর্তন:

<div class="box has-border has-border-primary">
  <p>This box has a primary colored border.</p>
</div>

<div class="box has-border has-border-danger">
  <p>This box has a danger colored border.</p>
</div>

এখানে:

• has-border-primary: বর্ডারের রঙ প্রাইমারি (primary) হবে।
• has-border-danger: বর্ডারের রঙ ডেঞ্জার (danger) হবে।

৪. রঙের শেড ব্যবহার

Bulma এ shades of color ব্যবহার করা হয়, যেমন is-light এবং is-dark। এগুলো রঙের হালকা বা গা dark ় শেড তৈরি করতে ব্যবহৃত হয়।

উদাহরণ: রঙের শেড

<button class="button is-primary is-light">Light Primary Button</button>
<button class="button is-primary is-dark">Dark Primary Button</button>

এখানে:

• is-light: প্রাইমারি রঙের হালকা শেড।
• is-dark: প্রাইমারি রঙের গা dark ় শেড।

অন্যান্য রঙের শেড:

• is-info is-light: ইনফো রঙের হালকা শেড।
• is-info is-dark: ইনফো রঙের গা dark ় শেড।

৫. Color Helpers - Button and Alerts

Bulma এর Color Helpers বাটন এবং এলার্টের জন্যও ব্যবহৃত হতে পারে, যেগুলোর মাধ্যমে আপনি বিভিন্ন ধরনের কনফিগারেশন দ্রুত করতে পারেন।

উদাহরণ: Button রঙ পরিবর্তন

<button class="button is-primary">Primary Button</button>
<button class="button is-link">Link Button</button>
<button class="button is-success">Success Button</button>

এখানে:

• is-primary: প্রাইমারি বাটন রঙ।
• is-link: লিঙ্ক বাটন রঙ।
• is-success: সাফল্য বাটন রঙ।

উদাহরণ: Alert রঙ পরিবর্তন

<div class="notification is-warning">
  This is a warning notification.
</div>

<div class="notification is-success">
  This is a success notification.
</div>

এখানে:

• is-warning: সতর্কতা এলার্ট রঙ।
• is-success: সাফল্য এলার্ট রঙ।

সারাংশ

Bulma Color Helper Classes আপনাকে সহজেই বিভিন্ন রঙ প্রয়োগ করতে সাহায্য করে। আপনি ব্যাকগ্রাউন্ড রঙ, টেক্সট রঙ, বর্ডার রঙ এবং শেড পরিবর্তন করতে পারেন। Bulma ফ্রেমওয়ার্কের এই সিস্টেমটি ব্যবহার করে আপনি খুব সহজেই ওয়েবসাইটের বিভিন্ন উপাদানের রঙ কাস্টমাইজ করতে পারবেন, যা ডিজাইনের স্বচ্ছতা এবং উপস্থাপনাকে আরো সুন্দর এবং কার্যকরী করে তোলে।

Bulma ফ্রেমওয়ার্কের Display এবং Visibility utilities আপনাকে HTML উপাদানগুলির প্রদর্শন এবং দৃশ্যমানতা নিয়ন্ত্রণ করতে সহায়তা করে। এই utilities গুলি ব্যবহার করে আপনি বিভিন্ন ডিভ, বাটন, বা অন্যান্য উপাদান গোপন বা দৃশ্যমান করতে পারেন, অথবা তাদের প্রদর্শন (display) স্টেট পরিবর্তন করতে পারেন। এগুলি সাধারণত লেআউট এবং রেসপনসিভ ডিজাইন তৈরি করার সময় খুবই কার্যকরী।

১. Display Utilities

Display utilities দ্বারা আপনি HTML উপাদানগুলির display প্রপার্টি নিয়ন্ত্রণ করতে পারবেন, যেমন block, inline, flex, none ইত্যাদি।

Display ক্লাসসমূহ:

• is-block: উপাদানটিকে block হিসেবে প্রদর্শন করবে (একটি নতুন লাইন শুরু করবে)।
• is-inline: উপাদানটিকে inline হিসেবে প্রদর্শন করবে (একই লাইনে থাকবে)।
• is-inline-block: উপাদানটিকে inline-block হিসেবে প্রদর্শন করবে।
• is-flex: উপাদানটিকে flex container হিসেবে প্রদর্শন করবে।
• is-inline-flex: উপাদানটিকে inline-flex হিসেবে প্রদর্শন করবে।
• is-hidden: উপাদানটিকে display: none করে গোপন করবে (দৃশ্যমান হবে না)।

উদাহরণ: Display Utilities ব্যবহার

<div class="is-block">
  <p>This is a block element.</p>
</div>

<div class="is-inline">
  <p>This is an inline element.</p>
</div>

<div class="is-flex">
  <p>This is a flex container.</p>
</div>

<div class="is-inline-flex">
  <p>This is an inline flex container.</p>
</div>

<div class="is-hidden">
  <p>This text is hidden (display: none).</p>
</div>

এখানে is-block, is-inline, is-flex, is-inline-flex, এবং is-hidden ক্লাস ব্যবহার করে বিভিন্ন display প্রপার্টি পরিবর্তন করা হয়েছে।

২. Visibility Utilities

Visibility utilities দ্বারা আপনি HTML উপাদানগুলির visibility প্রপার্টি নিয়ন্ত্রণ করতে পারবেন। এই প্রপার্টিটি উপাদানকে দৃশ্যমান বা অদৃশ্য (visibility: hidden) করে, কিন্তু উপাদানটি এখনও ডকুমেন্টের ফ্লোতে থাকে, অর্থাৎ জায়গা নেবে কিন্তু দেখা যাবে না।

Visibility ক্লাসসমূহ:

• is-visible: উপাদানটিকে দৃশ্যমান রাখে।
• is-invisible: উপাদানটিকে visibility: hidden করে (দৃশ্যমান হবে না কিন্তু জায়গা নেবে)।

উদাহরণ: Visibility Utilities ব্যবহার

<div class="is-visible">
  <p>This element is visible.</p>
</div>

<div class="is-invisible">
  <p>This element is invisible (visibility: hidden).</p>
</div>

এখানে is-visible এবং is-invisible ক্লাসগুলি উপাদানের দৃশ্যমানতা নিয়ন্ত্রণ করছে।

৩. রেসপনসিভ Display Utilities

Bulma তে রেসপনসিভ ডিজাইনের জন্য display ক্লাসের সাথে বিভিন্ন breakpoints ব্যবহার করা যায়। এটি বিভিন্ন স্ক্রীন সাইজ অনুযায়ী উপাদানগুলোকে প্রদর্শন বা গোপন করার জন্য ব্যবহৃত হয়।

উদাহরণ: রেসপনসিভ Display Utilities

<div class="is-hidden-mobile">
  <p>This text is hidden on mobile devices.</p>
</div>

<div class="is-hidden-tablet">
  <p>This text is hidden on tablet devices.</p>
</div>

<div class="is-hidden-desktop">
  <p>This text is hidden on desktop devices.</p>
</div>

<div class="is-hidden-touch">
  <p>This text is hidden on touch devices.</p>
</div>

এখানে is-hidden-mobile, is-hidden-tablet, is-hidden-desktop, এবং is-hidden-touch ক্লাসগুলো ব্যবহার করে আপনি উপাদানগুলিকে নির্দিষ্ট ডিভাইসের জন্য গোপন করতে পারেন।

৪. Combining Display এবং Visibility Utilities

আপনি display এবং visibility utilities একত্রে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি কোনো উপাদানকে প্রথমে hidden (display: none) করতে পারেন এবং পরে visibility প্রপার্টি দিয়ে তার দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: Display এবং Visibility একত্রে ব্যবহার

<div class="is-hidden is-visible">
  <p>This element is initially hidden but visible once the visibility is set.</p>
</div>

এখানে is-hidden ক্লাসটি উপাদানটিকে প্রথমে গোপন রাখবে (display: none) এবং পরে is-visible ক্লাসটি তাকে দৃশ্যমান করবে।

সারাংশ

Bulma এর Display এবং Visibility utilities আপনাকে HTML উপাদানগুলির প্রদর্শন এবং দৃশ্যমানতা নিয়ন্ত্রণ করার জন্য খুবই কার্যকরী টুল প্রদান করে। Display utilities যেমন is-block, is-inline, is-flex, is-hidden ইত্যাদি দিয়ে আপনি উপাদানগুলির প্রস্থ এবং লেআউট পরিবর্তন করতে পারেন। আর Visibility utilities যেমন is-visible, is-invisible দিয়ে আপনি উপাদানের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন। এছাড়াও, Bulma এর রেসপনসিভ display utilities দ্বারা আপনি উপাদানগুলোকে স্ক্রীন সাইজ অনুযায়ী গোপন বা প্রদর্শন করতে পারেন।