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

টেক্সট স্টাইলিং এবং টাইপোগ্রাফি ক্লাস

বুটস্ট্রাপ ৫-এর বিভিন্ন ক্লাস ব্যবহার করে আপনি ওয়েব পেজের টেক্সটকে সাজাতে পারেন। এখানে কিছু গুরুত্বপূর্ণ ক্লাসের উদাহরণ দেওয়া হলো:

১. টেক্সট সাইজ (Text Size)

বুটস্ট্রাপ ৫-এর টেক্সট সাইজের জন্য কয়েকটি পূর্বনির্ধারিত ক্লাস রয়েছে, যেমন:

• fs-1 থেকে fs-6: এই ক্লাসগুলির মাধ্যমে আপনি টেক্সটের সাইজ নিয়ন্ত্রণ করতে পারবেন। fs-1 সবচেয়ে বড় এবং fs-6 সবচেয়ে ছোট।

<p class="fs-1">এটি একটি বড় টেক্সট</p>
<p class="fs-2">এটি একটু ছোট টেক্সট</p>
<p class="fs-6">এটি সবচেয়ে ছোট টেক্সট</p>

২. টেক্সট কালার (Text Color)

টেক্সটের রঙ পরিবর্তন করতে text- ক্লাস ব্যবহার করা হয়। কিছু সাধারণ রঙের জন্য বুটস্ট্রাপ ৫ ক্লাস প্রদান করে:

• text-primary: প্রাথমিক রঙ (সবচেয়ে সাধারণ)
• text-secondary: সেকেন্ডারি রঙ
• text-success: সবুজ রঙ
• text-danger: লাল রঙ
• text-warning: হলুদ রঙ
• text-info: নীল রঙ
• text-light: হালকা রঙ
• text-dark: গা dark রঙ
• text-muted: মিউটেড বা ডিম রঙ
• text-white: সাদা রঙ

<p class="text-primary">এটি প্রাথমিক রঙে লেখা একটি প্যারাগ্রাফ।</p>
<p class="text-danger">এটি বিপজ্জনক রঙে লেখা একটি প্যারাগ্রাফ।</p>
<p class="text-muted">এটি মিউটেড রঙে লেখা একটি প্যারাগ্রাফ।</p>

৩. টেক্সট অ্যালাইনমেন্ট (Text Alignment)

টেক্সটের অবস্থান বা অ্যালাইনমেন্ট পরিবর্তন করতে নিচের ক্লাসগুলো ব্যবহার করা হয়:

• text-start: বাম থেকে শুরু (ডিফল্ট অবস্থান)
• text-center: কেন্দ্রীভূত
• text-end: ডানে সজ্জিত

<p class="text-start">এটি বাম থেকে শুরু হওয়া টেক্সট।</p>
<p class="text-center">এটি কেন্দ্রিত টেক্সট।</p>
<p class="text-end">এটি ডান দিকে সজ্জিত টেক্সট।</p>

৪. লাইন হাইট (Line Height)

বুটস্ট্রাপ ৫-এ আপনি lh- ক্লাসের মাধ্যমে টেক্সটের লাইন হাইট কাস্টমাইজ করতে পারেন। এখানে কিছু ক্লাসের উদাহরণ:

• lh-1: কম লাইন হাইট
• lh-sm: ছোট লাইন হাইট
• lh-base: স্বাভাবিক লাইন হাইট
• lh-lg: বড় লাইন হাইট

<p class="lh-sm">এটি ছোট লাইন হাইট সহ প্যারাগ্রাফ।</p>
<p class="lh-base">এটি সাধারণ লাইন হাইট সহ প্যারাগ্রাফ।</p>
<p class="lh-lg">এটি বড় লাইন হাইট সহ প্যারাগ্রাফ।</p>

৫. টেক্সট ট্রান্সফরমেশন (Text Transformation)

টেক্সটকে পরিবর্তিত করার জন্য কিছু ক্লাস রয়েছে:

• text-lowercase: টেক্সটকে সব ছোট হাতের অক্ষরে পরিবর্তন করবে।
• text-uppercase: টেক্সটকে সব বড় হাতের অক্ষরে পরিবর্তন করবে।
• text-capitalize: প্রথম অক্ষর বড় করে বাকী অক্ষর ছোট রাখবে।

<p class="text-uppercase">এটি বড় হাতের অক্ষরে লেখা প্যারাগ্রাফ।</p>
<p class="text-lowercase">এটি ছোট হাতের অক্ষরে লেখা প্যারাগ্রাফ।</p>
<p class="text-capitalize">এটি শুধুমাত্র প্রথম অক্ষর বড় করা প্যারাগ্রাফ।</p>

৬. ফন্ট ওয়েট (Font Weight)

ফন্টের মোটা বা পাতলা হওয়ার জন্য fw- ক্লাস ব্যবহার করা হয়। সাধারণভাবে, বুটস্ট্রাপ ৫ নিচের ক্লাসগুলো প্রদান করে:

• fw-bold: মোটা ফন্ট
• fw-normal: সাধারণ ফন্ট
• fw-light: পাতলা ফন্ট

<p class="fw-bold">এটি মোটা ফন্টে লেখা প্যারাগ্রাফ।</p>
<p class="fw-normal">এটি সাধারণ ফন্টে লেখা প্যারাগ্রাফ।</p>
<p class="fw-light">এটি পাতলা ফন্টে লেখা প্যারাগ্রাফ।</p>

টেক্সট স্টাইলিং এর জন্য অতিরিক্ত ক্লাস

১. টেক্সট আন্ডারলাইন এবং স্ট্রাইকথ্রু (Underline and Strikethrough)

• text-decoration-underline: টেক্সটের নিচে আন্ডারলাইন যোগ করা।
• text-decoration-line-through: টেক্সটের ওপর স্ট্রাইকথ্রু (লাইন ক্রস) যোগ করা।

<p class="text-decoration-underline">এটি আন্ডারলাইন করা টেক্সট।</p>
<p class="text-decoration-line-through">এটি স্ট্রাইকথ্রু করা টেক্সট।</p>

২. টেক্সট শ্যাডো (Text Shadow)

বুটস্ট্রাপ ৫ এর মাধ্যমে সরাসরি টেক্সট শ্যাডো ব্যবহার করা যায় না, তবে আপনি কাস্টম CSS ব্যবহার করে টেক্সট শ্যাডো যোগ করতে পারবেন:

<p class="custom-text-shadow">এটি টেক্সট শ্যাডো সহ প্যারাগ্রাফ।</p>

<style>
    .custom-text-shadow {
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
</style>

সারাংশ

বুটস্ট্রাপ ৫ এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি ক্লাসগুলি ওয়েব পেজের টেক্সটকে সহজে কাস্টমাইজ করার জন্য শক্তিশালী টুলস। আপনি টেক্সট সাইজ, রঙ, অ্যালাইনমেন্ট, লাইন হাইট, ট্রান্সফরমেশন, ফন্ট ওয়েট এবং অন্যান্য বৈশিষ্ট্যগুলি এই ক্লাসের মাধ্যমে সহজেই নিয়ন্ত্রণ করতে পারেন, যা আপনার ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।

বুটস্ট্রাপ ৫ এর টাইপোগ্রাফি এবং ফন্ট স্টাইলিং ওয়েবসাইটের পাঠযোগ্যতা এবং ইউজার এক্সপেরিয়েন্স (UX) উন্নত করতে সাহায্য করে। সঠিক টাইপোগ্রাফি ব্যবহার করলে আপনার কন্টেন্ট আরও প্রফেশনাল এবং আকর্ষণীয় দেখাবে। বুটস্ট্রাপ ৫ বিভিন্ন প্রি-ডিফাইন্ড ক্লাস সরবরাহ করে, যার মাধ্যমে আপনি সহজে ফন্ট, আকার, ইন্টারলাইনে (line height), লেটারস্পেসিং (letter spacing) এবং অন্যান্য টাইপোগ্রাফিক্যাল স্টাইল অ্যাপ্লাই করতে পারেন।

বুটস্ট্রাপ ৫ এ টাইপোগ্রাফি

বুটস্ট্রাপ ৫ এ টাইপোগ্রাফি সংশ্লিষ্ট কিছু সাধারণ ক্লাস এবং প্রপার্টি সরবরাহ করা হয়েছে, যার মাধ্যমে আপনি আপনার ওয়েবসাইটের ফন্ট এবং লেখার স্টাইল সহজে কাস্টমাইজ করতে পারেন।

ফন্ট সাইজ (Font Size)

বুটস্ট্রাপ ৫ এ কয়েকটি প্রি-ডিফাইন্ড ক্লাস রয়েছে যা দিয়ে আপনি সহজে ফন্ট সাইজ নিয়ন্ত্রণ করতে পারেন।

• fs-1 থেকে fs-6: এই ক্লাসগুলো দিয়ে আপনি সহজেই ফন্ট সাইজ নিয়ন্ত্রণ করতে পারবেন। fs-1 সবচেয়ে বড় ফন্ট সাইজ এবং fs-6 সবচেয়ে ছোট।

<p class="fs-1">এটি বড় ফন্ট সাইজ</p>
<p class="fs-5">এটি মাঝারি ফন্ট সাইজ</p>
<p class="fs-6">এটি ছোট ফন্ট সাইজ</p>

ফন্ট ওয়েট (Font Weight)

ফন্টের ভারীতা বা ফন্ট ওয়েট পরিবর্তন করতে বুটস্ট্রাপ ৫ এর বিভিন্ন ক্লাস ব্যবহার করা যেতে পারে।

• fw-bold: বোল্ড ফন্ট
• fw-light: লাইট ফন্ট
• fw-normal: স্বাভাবিক ফন্ট

<p class="fw-bold">এটি বোল্ড ফন্ট</p>
<p class="fw-light">এটি লাইট ফন্ট</p>
<p class="fw-normal">এটি স্বাভাবিক ফন্ট</p>

ফন্ট ফ্যামিলি (Font Family)

বুটস্ট্রাপ ৫ এর টাইপোগ্রাফি ক্লাসের মাধ্যমে আপনি ফন্ট ফ্যামিলি সেট করতে পারেন। বুটস্ট্রাপের ডিফল্ট ফন্ট ফ্যামিলি হলো Helvetica Neue।

<p class="font-monospace">এটি মনোস্পেস ফন্ট</p>
<p class="font-italic">এটি ইটালিক ফন্ট</p>

এছাড়াও, আপনি কাস্টম ফন্ট ফ্যামিলি ব্যবহার করতে পারেন।

লাইন হাইট (Line Height)

লাইন হাইট এর মাধ্যমে আপনি টেক্সটের মধ্যে যথাযথ স্থান তৈরি করতে পারেন, যা পড়ার অভিজ্ঞতা উন্নত করে। বুটস্ট্রাপ ৫ এ lh-1 থেকে lh-lg পর্যন্ত বিভিন্ন ক্লাস রয়েছে।

• lh-1: কম লাইন হাইট
• lh-sm: ছোট লাইন হাইট
• lh-base: স্বাভাবিক লাইন হাইট
• lh-lg: বড় লাইন হাইট

<p class="lh-sm">এটি ছোট লাইন হাইট</p>
<p class="lh-base">এটি স্বাভাবিক লাইন হাইট</p>
<p class="lh-lg">এটি বড় লাইন হাইট</p>

টেক্সট অ্যালাইনমেন্ট (Text Alignment)

বুটস্ট্রাপ ৫ এ টেক্সটের অ্যালাইনমেন্ট পরিবর্তন করতে বিভিন্ন ক্লাস রয়েছে, যেমন:

• text-start: বামদিকে টেক্সট অ্যালাইন করুন
• text-center: কেন্দ্রে টেক্সট অ্যালাইন করুন
• text-end: ডানদিকে টেক্সট অ্যালাইন করুন

<p class="text-start">এটি বাম দিকে অ্যালাইনড টেক্সট</p>
<p class="text-center">এটি কেন্দ্রে অ্যালাইনড টেক্সট</p>
<p class="text-end">এটি ডান দিকে অ্যালাইনড টেক্সট</p>

টেক্সট কালার (Text Color)

বুটস্ট্রাপ ৫ টেক্সটের রঙ পরিবর্তন করতে text-* ক্লাস প্রদান করেছে, যেমন:

• text-primary: প্রাইমারি রঙ (যেমন নীল)
• text-secondary: সেকেন্ডারি রঙ
• text-success: সফলতার রঙ (সবুজ)
• text-danger: বিপদ সংকেত (লাল)
• text-warning: সতর্কতা সংকেত (হলুদ)
• text-info: তথ্য রঙ (হালকা নীল)
• text-light: হালকা রঙ
• text-dark: গা dark ় রঙ
• text-muted: উজ্জ্বল কম রঙ

<p class="text-primary">এটি প্রাইমারি রঙের টেক্সট</p>
<p class="text-danger">এটি বিপদের রঙের টেক্সট</p>
<p class="text-muted">এটি ফিকে রঙের টেক্সট</p>

সারাংশ

বুটস্ট্রাপ ৫ এর টাইপোগ্রাফি এবং ফন্ট স্টাইলিং ক্লাসগুলির মাধ্যমে আপনি ওয়েব পেজের ফন্ট এবং টেক্সটের আকার, ওজন, রঙ, অবস্থান এবং লাইনে উচ্চতা সহজেই কাস্টমাইজ করতে পারবেন। এর ফলে, আপনার ওয়েবসাইটের পাঠযোগ্যতা এবং ডিজাইন আরও আকর্ষণীয় এবং পেশাদারী হয়ে উঠবে, যা বিভিন্ন স্ক্রীনে (মোবাইল, ট্যাবলেট, ডেস্কটপ) ভালভাবে প্রদর্শিত হবে।

বুটস্ট্রাপ ৫-এ টেক্সটের অ্যালাইনমেন্ট এবং ট্রান্সফরমেশন নিয়ন্ত্রণের জন্য বিভিন্ন ক্লাস ব্যবহার করা হয়। টেক্সটের অবস্থান (alignment) এবং ফরম্যাট (transformation) এর মাধ্যমে আপনি কন্টেন্টকে আরও পাঠযোগ্য এবং সুন্দর করে উপস্থাপন করতে পারেন।

টেক্সট অ্যালাইনমেন্ট (Text Alignment)

টেক্সটের অ্যালাইনমেন্টের মাধ্যমে আপনি টেক্সটের অবস্থান নিয়ন্ত্রণ করতে পারেন। বুটস্ট্রাপ ৫ এ, টেক্সটের অ্যালাইনমেন্ট নিয়ন্ত্রণ করার জন্য কয়েকটি ক্লাস রয়েছে:

• text-left: টেক্সট বাম দিকে সাজানো হয়।
• text-center: টেক্সট কেন্দ্রীয়ভাবে সাজানো হয়।
• text-right: টেক্সট ডানে সাজানো হয়।
• text-justify: টেক্সট সমভাবে (justify) সাজানো হয়, অর্থাৎ, টেক্সট দুটি প্রান্তে বিস্তৃত থাকে।
• text-nowrap: টেক্সটকে এক লাইনে রাখে, কোনো শব্দ বা বাক্য ভেঙে দেওয়া হয় না।

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

<div class="container">
    <p class="text-left">এটি বাম দিকে সজ্জিত টেক্সট।</p>
    <p class="text-center">এটি কেন্দ্রে সজ্জিত টেক্সট।</p>
    <p class="text-right">এটি ডানে সজ্জিত টেক্সট।</p>
    <p class="text-justify">এটি সমভাবে সজ্জিত টেক্সট, যেখানে পুরো লাইনের দৈর্ঘ্য সমান হয়।</p>
</div>

এখানে:

• প্রথম প্যারাগ্রাফটি বাম দিকে,
• দ্বিতীয় প্যারাগ্রাফটি কেন্দ্রে,
• তৃতীয় প্যারাগ্রাফটি ডানে এবং
• চতুর্থ প্যারাগ্রাফটি সমভাবে সজ্জিত।

টেক্সট ট্রান্সফরমেশন (Text Transformation)

টেক্সট ট্রান্সফরমেশন বা টেক্সট ফরম্যাটিং-এর মাধ্যমে আপনি টেক্সটের ক্যাপিটালাইজেশন নিয়ন্ত্রণ করতে পারেন। বুটস্ট্রাপ ৫ এ, টেক্সট ট্রান্সফরমেশন নিয়ন্ত্রণের জন্য কিছু সহজ ক্লাস রয়েছে:

• text-lowercase: টেক্সটকে ছোট হাতের অক্ষরে রূপান্তর করে।
• text-uppercase: টেক্সটকে বড় হাতের অক্ষরে রূপান্তর করে।
• text-capitalize: টেক্সটের প্রথম অক্ষরটি বড় হাতের অক্ষরে পরিবর্তিত হয়।

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

<div class="container">
    <p class="text-lowercase">এটি ছোট হাতের অক্ষরে লেখা টেক্সট।</p>
    <p class="text-uppercase">এটি বড় হাতের অক্ষরে লেখা টেক্সট।</p>
    <p class="text-capitalize">এটি ক্যাপিটালাইজড টেক্সট, যেখানে প্রতিটি শব্দের প্রথম অক্ষর বড়।</p>
</div>

এখানে:

• প্রথম প্যারাগ্রাফটি সব ছোট হাতের অক্ষরে থাকবে,
• দ্বিতীয় প্যারাগ্রাফটি সব বড় হাতের অক্ষরে থাকবে,
• তৃতীয় প্যারাগ্রাফে প্রতিটি শব্দের প্রথম অক্ষর বড় হবে।

সারাংশ

বুটস্ট্রাপ ৫ এ টেক্সট অ্যালাইনমেন্ট এবং টেক্সট ট্রান্সফরমেশন খুবই সহজে কন্টেন্টের উপস্থাপনাকে নিয়ন্ত্রণ করতে সহায়তা করে। আপনি সহজেই টেক্সটকে বাম, কেন্দ্র অথবা ডান দিকে সাজাতে পারেন, এবং একইভাবে টেক্সটের ক্যাপিটালাইজেশনও কাস্টমাইজ করতে পারেন। এই ক্লাসগুলো ওয়েব ডিজাইনকে আরও পাঠযোগ্য এবং ব্যবহারযোগ্য করে তোলে, বিশেষ করে রেসপন্সিভ ওয়েব ডিজাইনে।

বুটস্ট্রাপ ৫ এ, Headings, Paragraphs, এবং Lists ব্যবহার করার জন্য সহজ এবং প্রভাবশালী উপায় রয়েছে। এগুলো ব্যবহার করে আপনি ওয়েব পেজের কন্টেন্টকে সুন্দরভাবে সাজাতে পারেন, যাতে পাঠকদের জন্য পড়তে সুবিধাজনক হয় এবং কন্টেন্টের কাঠামো পরিষ্কার থাকে। বুটস্ট্রাপের Typography ক্লাসগুলি এই উপাদানগুলোর জন্য স্টাইলিং প্রদান করে।

Headings (শিরোনাম)

HTML-এ ৬টি স্তরের শিরোনাম (H1 থেকে H6) আছে, যা আপনার কন্টেন্টের কাঠামো নির্ধারণে সহায়তা করে। বুটস্ট্রাপ ৫ এ শিরোনামের জন্য প্রিফাইনড স্টাইল রয়েছে যা শিরোনামগুলোকে আরও আকর্ষণীয় ও পাঠযোগ্য করে তোলে।

উদাহরণ: Headings

<h1>এই হলো H1 শিরোনাম</h1>
<h2>এই হলো H2 শিরোনাম</h2>
<h3>এই হলো H3 শিরোনাম</h3>
<h4>এই হলো H4 শিরোনাম</h4>
<h5>এই হলো H5 শিরোনাম</h5>
<h6>এই হলো H6 শিরোনাম</h6>

বুটস্ট্রাপ ৫ এর ক্লাস ব্যবহার

বুটস্ট্রাপ ৫ এ শিরোনামগুলোর জন্য কিছু অতিরিক্ত ক্লাস দেওয়া আছে যা আপনাকে শিরোনামগুলো স্টাইল করতে সহায়তা করে:

• display-1, display-2, display-3, display-4: বড় শিরোনামের জন্য ব্যবহার করা হয়।
• fw-bold: শিরোনামকে বোল্ড করে।
• text-center: শিরোনামকে কেন্দ্রস্থলে রাখতে সাহায্য করে।

<h1 class="display-3 text-center fw-bold">বড় শিরোনাম</h1>
<h2 class="display-4 text-center">আরেকটি বড় শিরোনাম</h2>

Paragraphs (প্যারাগ্রাফ)

HTML-এ <p> ট্যাগ ব্যবহার করে প্যারাগ্রাফ তৈরি করা হয়। বুটস্ট্রাপ ৫ এ lead ক্লাস ব্যবহার করে আপনি প্যারাগ্রাফের আকার বা ফন্ট স্টাইল কাস্টমাইজ করতে পারেন, যা প্যারাগ্রাফকে আরও স্পষ্ট এবং মনোযোগ আকর্ষণকারী করে তোলে।

উদাহরণ: Paragraphs

<p>এটি একটি সাধারণ প্যারাগ্রাফ। আপনি এতে যে কোনো টেক্সট লিখতে পারেন, এবং এটি সাধারণভাবেই প্রদর্শিত হবে।</p>
<p class="lead">এটি একটি বড় প্যারাগ্রাফ, যার মাধ্যমে আপনি মূল কন্টেন্টের মধ্যে আরও বেশি গুরুত্ব দিতে পারেন।</p>

বুটস্ট্রাপ ৫ এর ক্লাস:

• lead: প্যারাগ্রাফের ফন্ট সাইজ বড় করে, যা গুরুত্বপূর্ণ টেক্সট হাইলাইট করার জন্য ব্যবহার করা যায়।
• text-center: প্যারাগ্রাফকে কেন্দ্রস্থলে প্রদর্শন করতে ব্যবহৃত হয়।
• text-muted: টেক্সটের রঙ হালকা করে দেয়, যা সাধারণত সহায়ক টেক্সট বা নোটস এর জন্য ব্যবহৃত হয়।

<p class="lead text-center">এটি একটি গুরুত্বপূর্ন এবং কেন্দ্রস্থলে প্রদর্শিত প্যারাগ্রাফ।</p>
<p class="text-muted">এটি একটি হালকা রঙের সহায়ক প্যারাগ্রাফ।</p>

Lists (তালিকা)

HTML-এ সাধারণত দুটি ধরনের তালিকা থাকে:

1. Ordered List (অর্ডারড তালিকা) - যেখানে আইটেমগুলো একটি নির্দিষ্ট অর্ডারে থাকে।
2. Unordered List (আনঅর্ডারড তালিকা) - যেখানে আইটেমগুলো কোন নির্দিষ্ট অর্ডারে থাকে না।

Ordered List (অর্ডারড তালিকা)

<ol>
    <li>প্রথম আইটেম</li>
    <li>দ্বিতীয় আইটেম</li>
    <li>তৃতীয় আইটেম</li>
</ol>

এখানে তালিকা আইটেমগুলো একটি নম্বরের মাধ্যমে সাজানো থাকে।

Unordered List (আনঅর্ডারড তালিকা)

<ul>
    <li>প্রথম আইটেম</li>
    <li>দ্বিতীয় আইটেম</li>
    <li>তৃতীয় আইটেম</li>
</ul>

এখানে তালিকা আইটেমগুলো পয়েন্টের মাধ্যমে সাজানো থাকে (বুলেট পয়েন্ট)।

বুটস্ট্রাপ ৫ এর ক্লাস ব্যবহার

বুটস্ট্রাপ ৫ এ list-group ক্লাস রয়েছে, যা তালিকা আইটেমগুলোর জন্য সুনির্দিষ্ট স্টাইলিং প্রদান করে এবং তালিকাকে আরও সুন্দরভাবে উপস্থাপন করে।

• list-group: সাধারণ তালিকা তৈরি করে।
• list-group-item: তালিকা আইটেমের জন্য ব্যবহৃত হয়।
• list-group-flush: তালিকাকে বর্ডারলেস তৈরি করতে ব্যবহার করা হয়।

উদাহরণ: List Group

<ul class="list-group">
    <li class="list-group-item">প্রথম আইটেম</li>
    <li class="list-group-item">দ্বিতীয় আইটেম</li>
    <li class="list-group-item">তৃতীয় আইটেম</li>
</ul>

এখানে list-group ক্লাস তালিকার আইটেমগুলোর মধ্যে ফাঁকা জায়গা রেখে সুন্দরভাবে প্রদর্শন করে।

সারাংশ

বুটস্ট্রাপ ৫ এর Headings, Paragraphs, এবং Lists ব্যবহারের মাধ্যমে আপনি ওয়েব পেজে কন্টেন্টকে সুন্দরভাবে সাজাতে পারেন। Typography ক্লাসগুলি এই উপাদানগুলোর জন্য উপযুক্ত স্টাইলিং প্রদান করে, যাতে ওয়েবসাইটের পাঠযোগ্যতা এবং ডিজাইন আরও উন্নত হয়। Headings এবং Paragraphs এর জন্য সহজ CSS কাস্টমাইজেশন এবং Lists এর জন্য আকর্ষণীয় স্টাইলিং ওয়েব পেজকে আরও প্রফেশনাল এবং ব্যবহারকারী বান্ধব করে তোলে।

বুটস্ট্রাপ ৫ এ Text Utilities এবং Font Size কাস্টমাইজেশন এর মাধ্যমে আপনি সহজে টেক্সটের স্টাইল, সাইজ, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন। এই টুলসগুলো ব্যবহার করে আপনি ওয়েব পেজের টেক্সটের দেখাশোনা, অবস্থান এবং আকৃতি সহজেই কাস্টমাইজ করতে পারবেন।

Text Utilities

বুটস্ট্রাপ ৫ এ Text Utilities এর মাধ্যমে বিভিন্ন টেক্সট স্টাইল এবং বৈশিষ্ট্য দ্রুত কাস্টমাইজ করা যায়। এতে রয়েছে টেক্সটের রঙ, অ্যালাইনমেন্ট, ট্রান্সফর্মেশন, ওয়েট, এবং আরও অনেক কিছু। এই ক্লাসগুলোকে text-* ফরম্যাটে ব্যবহার করা হয়।

১. Text Alignment (টেক্সটের অবস্থান)

বুটস্ট্রাপ ৫ এ বিভিন্ন টেক্সট এলাইনমেন্টের জন্য কিছু ক্লাস প্রদান করা হয়েছে:

• text-left: টেক্সট বামদিকে সজ্জিত করে।
• text-center: টেক্সটকে কেন্দ্রে সজ্জিত করে।
• text-right: টেক্সটকে ডানদিকে সজ্জিত করে।

<p class="text-left">এটি বাম দিকে সজ্জিত টেক্সট।</p>
<p class="text-center">এটি কেন্দ্রস্থলে সজ্জিত টেক্সট।</p>
<p class="text-right">এটি ডান দিকে সজ্জিত টেক্সট।</p>

২. Text Color (টেক্সটের রঙ)

বুটস্ট্রাপ ৫ এ বিভিন্ন টেক্সট রঙ ক্লাস রয়েছে, যা আপনার টেক্সটের রঙ পরিবর্তন করতে সাহায্য করবে:

• text-primary: প্রাথমিক রঙ (নির্ধারিত ব্লু)
• text-secondary: সেকেন্ডারি রঙ
• text-success: সাকসেস রঙ (সবুজ)
• text-danger: বিপদজনক রঙ (লাল)
• text-warning: সতর্কতা রঙ (হলুদ)
• text-info: তথ্য রঙ (নীল)
• text-light: হালকা রঙ
• text-dark: গা dark ় রঙ

<p class="text-primary">এটি প্রাথমিক রঙের টেক্সট।</p>
<p class="text-success">এটি সাকসেস রঙের টেক্সট।</p>
<p class="text-danger">এটি বিপদজনক রঙের টেক্সট।</p>

৩. Text Transform (টেক্সট ট্রান্সফর্ম)

Text Transform ক্লাস ব্যবহার করে আপনি টেক্সটের কেস পরিবর্তন করতে পারেন:

• text-uppercase: টেক্সটকে বড় হাতের অক্ষরে পরিবর্তন করে।
• text-lowercase: টেক্সটকে ছোট হাতের অক্ষরে পরিবর্তন করে।
• text-capitalize: প্রথম অক্ষর বড় করে বাকিটা ছোট রাখে।

<p class="text-uppercase">এটি বড় হাতের অক্ষরে লেখা টেক্সট।</p>
<p class="text-lowercase">এটি ছোট হাতের অক্ষরে লেখা টেক্সট।</p>
<p class="text-capitalize">এটি ক্যাপিটালাইজড টেক্সট।</p>

৪. Text Decoration (টেক্সট ডেকোরেশন)

• text-decoration-underline: টেক্সটের নিচে আন্ডারলাইন দেয়।
• text-decoration-line-through: টেক্সটের উপর লাইন দেয় (স্ট্রাইকথ্রু)।

<p class="text-decoration-underline">এটি আন্ডারলাইন করা টেক্সট।</p>
<p class="text-decoration-line-through">এটি স্ট্রাইকথ্রু টেক্সট।</p>

Font Size কাস্টমাইজ করা

বুটস্ট্রাপ ৫ এ টেক্সটের font size কাস্টমাইজ করতে কিছু প্রি-ডিফাইনড ক্লাস রয়েছে। এছাড়াও, আপনি নিজের কাস্টম সিএসএস দিয়ে Font Size নির্ধারণ করতে পারেন।

১. Font Size Utilities

বুটস্ট্রাপ ৫ এ বিভিন্ন font size ক্লাস রয়েছে, যা আপনাকে টেক্সটের আকার কাস্টমাইজ করতে সাহায্য করে। এই ক্লাসগুলো fs-* ফরম্যাটে ব্যবহার করা হয়, যেখানে নম্বর আপনার পছন্দের ফন্ট সাইজ নির্দেশ করে (১ থেকে ৬ পর্যন্ত)।

• fs-1: বড় ফন্ট সাইজ।
• fs-2: মাঝারি বড় ফন্ট সাইজ।
• fs-3: সাধারণ সাইজ।
• fs-4: একটু ছোট ফন্ট সাইজ।
• fs-5: আরও ছোট ফন্ট সাইজ।
• fs-6: সবচেয়ে ছোট ফন্ট সাইজ।

<p class="fs-1">এটি সবচেয়ে বড় ফন্ট সাইজ।</p>
<p class="fs-2">এটি একটু ছোট ফন্ট সাইজ।</p>
<p class="fs-3">এটি সাধারণ ফন্ট সাইজ।</p>
<p class="fs-4">এটি আরও ছোট ফন্ট সাইজ।</p>
<p class="fs-5">এটি সবচেয়ে ছোট ফন্ট সাইজ।</p>

২. Font Size এর জন্য কাস্টম সিএসএস ব্যবহার

আপনি যদি আরও সুনির্দিষ্ট বা কাস্টম ফন্ট সাইজ চান, তাহলে CSS দিয়ে আপনি নিজে কাস্টম সাইজ সেট করতে পারেন:

<p style="font-size: 20px;">এটি কাস্টম ফন্ট সাইজ (২০px) এর টেক্সট।</p>
<p style="font-size: 1.5em;">এটি কাস্টম ফন্ট সাইজ (1.5em) এর টেক্সট।</p>

সারাংশ

বুটস্ট্রাপ ৫ এ Text Utilities এবং Font Size কাস্টমাইজেশন ব্যবহার করে আপনি সহজে আপনার ওয়েব পেজের টেক্সটের স্টাইল, সাইজ, এবং আঙ্গিক পরিবর্তন করতে পারেন। Text Utilities এর মাধ্যমে আপনি টেক্সটের অ্যালাইনমেন্ট, রঙ, এবং ট্রান্সফর্মেশন কাস্টমাইজ করতে পারবেন, আর Font Size কাস্টমাইজেশন এর মাধ্যমে আপনার কন্টেন্টের পাঠযোগ্যতা উন্নত করতে সক্ষম হবেন।