Bulma CSS ফ্রেমওয়ার্কে টেক্সট স্টাইলিংয়ের জন্য বিভিন্ন ক্লাস রয়েছে, যা সহজে টেক্সট এলাইনমেন্ট, ফন্ট ওয়েট এবং ট্রান্সফর্ম প্রপার্টি কাস্টমাইজ করতে সহায়তা করে। এই টপিকটিতে আমরা Text Alignment, Font Weight, এবং Text Transform এর সাথে সম্পর্কিত Bulma ক্লাসগুলো দেখবো।
১. টেক্সট এলাইনমেন্ট (Text Alignment)
Bulma ফ্রেমওয়ার্কে টেক্সটের alignment কাস্টমাইজ করতে text-align প্রপার্টির জন্য কয়েকটি ক্লাস রয়েছে। আপনি সহজেই টেক্সটকে left, center, বা right অ্যালাইন করতে পারবেন।
টেক্সট এলাইনমেন্ট ক্লাস:
- has-text-left: টেক্সটকে বামদিকে অ্যালাইন করে।
- has-text-centered: টেক্সটকে কেন্দ্রস্থলে অ্যালাইন করে।
- has-text-right: টেক্সটকে ডানদিকে অ্যালাইন করে।
উদাহরণ:
<div class="container">
<h1 class="title has-text-left">Left Aligned Text</h1>
<h1 class="title has-text-centered">Centered Text</h1>
<h1 class="title has-text-right">Right Aligned Text</h1>
</div>
এখানে has-text-left, has-text-centered, এবং has-text-right ক্লাসগুলো ব্যবহার করা হয়েছে টেক্সটের এলাইনমেন্ট পরিবর্তন করতে।
২. ফন্ট ওয়েট (Font Weight)
Bulma ফ্রেমওয়ার্কে টেক্সটের ফন্ট ওয়েট (যেমন বোল্ড, লাইট, বা নরমাল) কাস্টমাইজ করার জন্য has-text-weight- প্রিফিক্স ব্যবহার করা হয়। আপনি বিভিন্ন ফন্ট ওয়েট কাস্টমাইজ করতে পারেন।
ফন্ট ওয়েট ক্লাস:
- has-text-weight-light: লাইট ওয়েট ফন্ট।
- has-text-weight-normal: সাধারণ ওয়েট ফন্ট (ডিফল্ট ফন্ট ওয়েট)।
- has-text-weight-semibold: সেমি-বোল্ড ফন্ট।
- has-text-weight-bold: বোল্ড ফন্ট।
উদাহরণ:
<div class="container">
<h1 class="title has-text-weight-light">Light Weight Text</h1>
<h1 class="title has-text-weight-normal">Normal Weight Text</h1>
<h1 class="title has-text-weight-semibold">Semi-Bold Text</h1>
<h1 class="title has-text-weight-bold">Bold Text</h1>
</div>
এখানে বিভিন্ন ফন্ট ওয়েট ক্লাস যেমন has-text-weight-light, has-text-weight-normal, has-text-weight-semibold, এবং has-text-weight-bold ব্যবহার করা হয়েছে।
৩. টেক্সট ট্রান্সফর্ম (Text Transform)
Bulma ফ্রেমওয়ার্কে টেক্সটের কেস পরিবর্তন করতে text-transform প্রপার্টির জন্য কিছু ক্লাস রয়েছে। এর মাধ্যমে আপনি টেক্সটের কেস uppercase, lowercase, বা capitalize করতে পারেন।
টেক্সট ট্রান্সফর্ম ক্লাস:
- has-text-transform-uppercase: টেক্সটের সকল অক্ষরকে বড় হরফে রূপান্তর করে।
- has-text-transform-lowercase: টেক্সটের সকল অক্ষরকে ছোট হরফে রূপান্তর করে।
- has-text-transform-capitalized: প্রথম অক্ষর বড় হরফে এবং বাকি অক্ষর ছোট হরফে রূপান্তর করে।
উদাহরণ:
<div class="container">
<h1 class="title has-text-transform-uppercase">Uppercase Text</h1>
<h1 class="title has-text-transform-lowercase">Lowercase Text</h1>
<h1 class="title has-text-transform-capitalized">Capitalized Text</h1>
</div>
এখানে has-text-transform-uppercase, has-text-transform-lowercase, এবং has-text-transform-capitalized ক্লাসগুলো ব্যবহার করা হয়েছে টেক্সটের কেস পরিবর্তন করতে।
সারাংশ
Bulma ফ্রেমওয়ার্কে Text Alignment, Font Weight, এবং Text Transform ক্লাসগুলো ব্যবহার করে টেক্সট স্টাইলিং করা খুবই সহজ। আপনি টেক্সটকে সহজেই এলাইন করতে পারেন, ফন্ট ওয়েট কাস্টমাইজ করতে পারেন এবং টেক্সটের কেস পরিবর্তন করতে পারেন। এগুলো সবই Bulma এর প্রস্তুতকৃত ক্লাসের মাধ্যমে দ্রুত এবং কার্যকরভাবে করা সম্ভব।
Read more
