বুটস্ট্রাপ ৫ এ আইকনস এবং SVG (Scalable Vector Graphics) ব্যবহার করা সহজ এবং কার্যকরী। এগুলি ওয়েব পেজের ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করতে সাহায্য করে। বুটস্ট্রাপ ৫-এ Bootstrap Icons নামে একটি আইকন লাইব্রেরি রয়েছে, যা ব্যবহারের জন্য প্রস্তুত। এর মাধ্যমে আপনি যেকোনো ধরণের আইকন সহজেই আপনার ওয়েবপেজে অন্তর্ভুক্ত করতে পারেন। এছাড়া, SVG ফরম্যাটে আইকন ব্যবহার করলে এগুলি স্কেলযোগ্য এবং নিখুঁত মানের থাকে।
বুটস্ট্রাপ আইকনস একটি ওপেন সোর্স আইকন লাইব্রেরি যা বুটস্ট্রাপের সাথে সম্পূর্ণভাবে ইন্টিগ্রেটেড। এটি প্রায় ১,৩০০+ আইকন সরবরাহ করে যা আপনাকে সহজেই আপনার ওয়েব পেজে যুক্ত করার সুযোগ দেয়।
আপনি বুটস্ট্রাপ আইকনস ব্যবহার করার জন্য সহজেই CDN বা NPM ব্যবহার করতে পারেন।
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
npm install bootstrap-icons
একটি আইকন ব্যবহার করার জন্য, <i> বা <svg> ট্যাগ ব্যবহার করা হয় এবং বুটস্ট্রাপ আইকন ক্লাস যোগ করতে হয়।
<!-- Example using an icon -->
<i class="bi bi-house-door"></i>
এই কোডটি একটি বাড়ির আইকন প্রদর্শন করবে। bi bi-house-door ক্লাসের মাধ্যমে নির্দিষ্ট আইকনটি ডাকা হয়।
SVG একটি গ্রাফিক্স ফরম্যাট যা স্কেলযোগ্য এবং যেকোনো আকারে গুণগত মান বজায় রাখে। আপনি যখন বুটস্ট্রাপ ৫ এর আইকনস ব্যবহার করেন, তখন এগুলি সাধারণত SVG ফরম্যাটে থাকে, যার ফলে আপনি যে কোনও স্ক্রীন সাইজে একটি নিখুঁত, ক্লিয়ার ইমেজ পাবেন।
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
<path d="M8 1.5A6.5 6.5 0 0 0 1.5 8 6.5 6.5 0 0 0 8 14.5 6.5 6.5 0 0 0 14.5 8 6.5 6.5 0 0 0 8 1.5ZM8 13A5 5 0 1 1 13 8A5 5 0 0 1 8 13Z"/>
</svg>
এখানে, <svg> ট্যাগের মাধ্যমে একটি গিয়ার আইকন প্রদর্শিত হবে। এর মধ্যে:
width এবং height: আইকনের আকার নির্ধারণ করে।fill="currentColor": এটি আইকনের রঙ নির্ধারণে সাহায্য করে। এর মানে হল যে আইকনটির রঙ প্যারেন্ট এলিমেন্ট থেকে নেয়া হবে, সাধারণত টেক্সট রঙ।viewBox: এটি SVG ইমেজের আউটলাইন এবং স্কেলিং সমন্বিত করার জন্য ব্যবহৃত হয়।বুটস্ট্রাপ ৫ এর আইকনগুলো অত্যন্ত কাস্টমাইজযোগ্য। আপনি সহজেই তাদের আকার, রঙ, বা অন্যান্য স্টাইল প্রোপার্টি পরিবর্তন করতে পারেন। এই কাস্টমাইজেশন CSS ব্যবহার করে করা হয়।
<i class="bi bi-heart-fill" style="font-size: 2rem; color: red;"></i>
এখানে:
font-size: 2rem: আইকনের আকার বড় করা হয়েছে।color: red: আইকনটির রঙ পরিবর্তন করা হয়েছে লাল।<i class="bi bi-twitter"></i>
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
<button class="btn btn-primary">
<i class="bi bi-check-circle"></i> সফল
</button>
<i class="bi bi-arrow-right-circle"></i> পরবর্তী
বুটস্ট্রাপ ৫ এর আইকনস এবং SVG ব্যবহার করা ওয়েব পেজের ডিজাইনে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। এগুলি সহজে কাস্টমাইজ করা যায় এবং আইকনগুলো যেকোনো স্ক্রীন সাইজে ভালোভাবে স্কেল করে, ফলে এগুলি আধুনিক এবং রেসপন্সিভ ডিজাইনের জন্য উপযুক্ত। Bootstrap Icons লাইব্রেরি ব্যবহার করে আপনি সহজেই বিভিন্ন আইকন যোগ করতে পারেন, যা আপনার ওয়েব পেজের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় ও ইন্টারেক্টিভ করে তুলবে।
বুটস্ট্রাপ ৫ এ আইকন ব্যবহার করা সহজ এবং তা ওয়েবসাইটের ইউজার ইন্টারফেসে আরও আকর্ষণীয়তা এবং কার্যকরীতা যোগ করে। বুটস্ট্রাপ ৫ আইকনগুলির জন্য Bootstrap Icons নামে একটি আলাদা লাইব্রেরি প্রদান করে, যা আইকনগুলোকে দ্রুত এবং সুন্দরভাবে ব্যবহার করা যায়।
বুটস্ট্রাপ ৫ এ আইকনগুলি ব্যবহারের জন্য আপনাকে প্রথমে Bootstrap Icons লাইব্রেরি যুক্ত করতে হবে এবং তারপর সেই আইকনগুলো আপনার HTML কোডে ব্যবহার করতে হবে।
বুটস্ট্রাপ ৫ আইকন ব্যবহার করতে Bootstrap Icons লাইব্রেরি CDN বা ডাউনলোড করা ফাইল ব্যবহার করে আপনার পেজে অন্তর্ভুক্ত করতে হবে।
<head>
<!-- Bootstrap Icons CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>
একবার Bootstrap Icons লাইব্রেরি লোড হয়ে গেলে, আপনি খুব সহজেই HTML ট্যাগে আইকন ব্যবহার করতে পারবেন। আইকন ব্যবহার করতে <i> বা <span> ট্যাগে bi ক্লাস এবং নির্দিষ্ট আইকনের ক্লাস অ্যাড করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Icons Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<!-- আইকন ব্যবহার উদাহরণ -->
<button class="btn btn-primary">
<i class="bi bi-house-door"></i> হোম
</button>
<button class="btn btn-success">
<i class="bi bi-check-circle"></i> সফল
</button>
<button class="btn btn-danger">
<i class="bi bi-x-circle"></i> বাতিল
</button>
<!-- আইকন শুধুমাত্র -->
<i class="bi bi-star"></i>
<i class="bi bi-heart"></i>
<i class="bi bi-envelope"></i>
</body>
</html>
বুটস্ট্রাপ ৫ এ আপনি আইকনের আকার এবং স্টাইল খুব সহজে কাস্টমাইজ করতে পারেন। আপনি CSS ব্যবহার করে আইকনের আকার এবং রঙ পরিবর্তন করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customized Bootstrap Icons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<style>
.icon-large {
font-size: 3rem;
color: #007bff;
}
.icon-small {
font-size: 1rem;
color: #28a745;
}
</style>
</head>
<body>
<!-- বড় আইকন -->
<i class="bi bi-star icon-large"></i>
<!-- ছোট আইকন -->
<i class="bi bi-heart icon-small"></i>
</body>
</html>
<i class="bi bi-house-door"></i><i class="bi bi-check-circle"></i><i class="bi bi-x-circle"></i><i class="bi bi-star"></i><i class="bi bi-heart"></i><i class="bi bi-envelope"></i><i class="bi bi-telephone"></i><i class="bi bi-link"></i>এই আইকনগুলো স্লাইডশো, বাটন, নোটিফিকেশন, মেনু, বা অন্যান্য ইন্টারফেস উপাদানে ব্যবহার করা যায়।
বুটস্ট্রাপ ৫ এর Bootstrap Icons লাইব্রেরি ব্যবহার করে আপনি সহজেই আইকন ব্যবহার করতে পারেন। আইকনগুলোকে আপনি HTML ট্যাগে সন্নিবেশ করতে পারবেন এবং CSS ব্যবহার করে তাদের আকার এবং রঙ কাস্টমাইজ করতে পারবেন। CDN বা ডাউনলোড করা ফাইল থেকে লাইব্রেরি লিঙ্ক যোগ করে আইকনগুলি ব্যবহার করা সম্ভব, যা আপনার ওয়েবসাইটে দ্রুত এবং সহজে ইন্টারঅ্যাক্টিভ উপাদান যোগ করতে সাহায্য করবে।
Font Awesome এবং Bootstrap Icons হল দুটি জনপ্রিয় আইকন লাইব্রেরি যা ওয়েব ডিজাইনে ইমেজ এবং আইকনগুলির জন্য ব্যবহার করা হয়। Font Awesome একটি বহুল ব্যবহৃত আইকন প্যাক যা বিভিন্ন ধরনের আইকন প্রদান করে, এবং Bootstrap Icons হল বুটস্ট্রাপের নিজস্ব আইকন লাইব্রেরি। এই দুটি লাইব্রেরি ব্যবহার করে আপনার ওয়েব পেজে সুন্দর এবং প্রফেশনাল লুক আনা সম্ভব।
বুটস্ট্রাপ ৫ এর সাথে Font Awesome এবং Bootstrap Icons ইন্টিগ্রেশন করলে আপনি আরও আকর্ষণীয় এবং ইন্টারেক্টিভ আইকন ব্যবহার করতে পারবেন।
Font Awesome আইকন লাইব্রেরি ইন্টিগ্রেট করতে আপনাকে প্রথমে Font Awesome এর সিডিএন লিঙ্ক যুক্ত করতে হবে এবং তারপর প্রয়োজনীয় আইকনটি HTML এ ব্যবহার করতে হবে।
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-phone-alt"></i>
এই উদাহরণে, fa-home, fa-user, এবং fa-phone-alt হল Font Awesome এর আইকন ক্লাস, যেগুলি হোম, ইউজার এবং ফোন আইকন প্রদর্শন করবে।
Bootstrap Icons হল বুটস্ট্রাপের নিজস্ব আইকন লাইব্রেরি, যা বুটস্ট্রাপ ৫ এর সাথে একত্রে ব্যবহারের জন্য তৈরি করা হয়েছে। এই লাইব্রেরিটি সহজেই বুটস্ট্রাপ ৫ এর অন্যান্য উপাদানের সাথে ইন্টিগ্রেট করা যায়।
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<i class="bi bi-house-door"></i>
<i class="bi bi-person"></i>
<i class="bi bi-telephone"></i>
এই উদাহরণে, bi-house-door, bi-person, এবং bi-telephone হল Bootstrap Icons এর আইকন ক্লাস, যেগুলি হাউস, ইউজার, এবং ফোন আইকন প্রদর্শন করবে।
Font Awesome এবং Bootstrap Icons একসাথে ব্যবহার করা সম্ভব। আপনি যেকোনো আইকন লাইব্রেরি থেকে আইকনগুলি HTML-এ যোগ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে উভয় লাইব্রেরির আইকন ব্যবহার করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Awesome এবং Bootstrap Icons ইন্টিগ্রেশন</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Font Awesome আইকন -->
<h3><i class="fas fa-home"></i> Home</h3>
<h3><i class="fas fa-user"></i> User</h3>
<!-- Bootstrap Icons -->
<h3><i class="bi bi-house-door"></i> Home</h3>
<h3><i class="bi bi-person"></i> User</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
fas ক্লাসের মাধ্যমে আইকন ট্যাগের মধ্যে ব্যবহৃত আইকন ক্লাস fa-home, fa-user ইত্যাদি যোগ করা হয়েছে।bi ক্লাসের মাধ্যমে আইকনগুলি প্রদর্শন করা হয়েছে, যেমন bi-house-door, bi-person ইত্যাদি।এইভাবে, আপনি Font Awesome এবং Bootstrap Icons একত্রে বা একে অপরের বিকল্প হিসেবে ব্যবহার করে আপনার ওয়েব পেজে আইকনগুলোকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করে তুলতে পারবেন।
SVG (Scalable Vector Graphics) একটি গ্রাফিক্স ফরম্যাট যা ওয়েব পেজে উচ্চ রেজোলিউশনের ছবি প্রদর্শন করতে ব্যবহৃত হয়। SVG ছবিগুলি স্কেলযোগ্য, অর্থাৎ এগুলি কোনো রেজোলিউশনে বিভক্ত বা ডিস্টর্ট ছাড়া প্রদর্শিত হতে পারে। Custom Icons মানে হল আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের জন্য নিজস্ব আইকন ডিজাইন করা এবং সেগুলি ব্যবহৃত করা।
বুটস্ট্র্যাপ ৫ তে SVG Icons এবং Custom Icons ব্যবহারের সুবিধা রয়েছে। এটি লাইটওয়েট এবং পারফরম্যান্সের জন্য উপকারী, কারণ SVG ফাইলগুলি সাধারণত অন্যান্য ফরম্যাটের চেয়ে ছোট হয় এবং কাস্টম আইকনগুলির জন্য আরো বেশি নিয়ন্ত্রণ প্রদান করে।
বুটস্ট্র্যাপ ৫ এ আপনি SVG Icons ব্যবহার করতে পারেন যে কোনও আইকন লাইব্রেরি বা কাস্টম SVG ফাইলের মাধ্যমে। বুটস্ট্র্যাপ ৫ এর জন্য আইকন ব্যবহারে Bootstrap Icons একটি জনপ্রিয় এবং বিল্ট-ইন লাইব্রেরি। এটি সহজে ব্যবহারযোগ্য এবং ওয়েব পেজের ডিজাইন উন্নত করতে সাহায্য করে।
Bootstrap Icons ব্যবহার: প্রথমে, বুটস্ট্র্যাপ আইকন লাইব্রেরি যুক্ত করতে হবে।
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
এরপর, আপনি আইকন ব্যবহার করতে পারেন নিচের মত:
<i class="bi bi-house-door"></i> <!-- Home Icon -->
<i class="bi bi-pencil"></i> <!-- Edit Icon -->
<i class="bi bi-trash"></i> <!-- Trash Icon -->
বুটস্ট্র্যাপ ৫ এর জন্য আইকনগুলি <svg> এলিমেন্ট হিসেবে ব্যবহৃত হয়, যা দ্রুত লোড হয় এবং স্কেলযোগ্য।
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
<path d="M8 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM2.93 4.19l1.137 1.687a1 1 0 0 1 0 1.26l-.5.75a1 1 0 0 0 0 1.262l1.228 1.43a1 1 0 0 1 1.43-.005l.63.507a1 1 0 0 0 1.177.02l1.753-1.073a1 1 0 0 1 1.264 0l1.5.75a1 1 0 0 1 .016 1.755l-1.5.75a1 1 0 0 1-1.264 0l-1.753-1.073a1 1 0 0 0-1.177-.02l-.63-.507a1 1 0 0 1-1.43.005L5.66 8.858a1 1 0 0 0-1.228-1.43l.5-.75a1 1 0 0 0-.5-1.262l-1.137-1.687A1 1 0 0 1 2.93 4.19z"/>
</svg>
এখানে fill="currentColor" ব্যবহার করা হয়েছে, যা আইকনের রঙ সিএসএসের color প্রোপার্টি দ্বারা নিয়ন্ত্রণ করতে সাহায্য করে।
Custom Icons ব্যবস্থাপনা করার জন্য আপনি নিজের ডিজাইন করা আইকনগুলিকে SVG ফরম্যাটে ব্যবহার করতে পারেন। এই প্রক্রিয়া আপনাকে পূর্ণ নিয়ন্ত্রণ প্রদান করে, এবং আপনি যে কোনো ধরণের কাস্টম ডিজাইন তৈরি করতে পারবেন।
Custom SVG Icon ফাইল ব্যবহার: আপনার সাইটে এই কাস্টম আইকন যুক্ত করতে পারেন সরাসরি SVG ফাইল হিসেবে অথবা ইনলাইন SVG কোড হিসেবে।
SVG ফাইল ইম্পোর্ট:
<img src="path/to/your-icon.svg" alt="Custom Icon" />
Inline SVG (HTML-এ ইমপোর্ট):
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M16 0 L32 16 L16 32 L0 16 Z" fill="#FF5733"/>
</svg>
এখানে আপনি SVG কোড সরাসরি HTML ডকুমেন্টে যুক্ত করে কাস্টম আইকন তৈরি করেছেন, যা স্কেলযোগ্য এবং ক্লিয়ার থাকে যেকোনো রেজোলিউশনে।
বুটস্ট্র্যাপ ৫ এ SVG Icons এবং Custom Icons ব্যবস্থাপনা খুবই সহজ এবং কার্যকর। আপনি Bootstrap Icons লাইব্রেরি ব্যবহার করতে পারেন অথবা নিজস্ব কাস্টম আইকন ডিজাইন করে SVG ফরম্যাটে ওয়েবসাইটে যুক্ত করতে পারেন। SVG Icons এর মাধ্যমে আপনি ওয়েব পেজের পারফরম্যান্স বাড়াতে এবং ভিজ্যুয়াল উপস্থাপন আরও আকর্ষণীয় করতে পারবেন।
বুটস্ট্রাপ ৫ এবং অন্যান্য ওয়েব ডিজাইন টুলস ব্যবহারকারীদের জন্য বিভিন্ন ধরনের আইকন ব্যবহার করার সুবিধা প্রদান করে। তবে কখনো কখনো, আপনি আইকনের ডিফল্ট স্টাইলিং পরিবর্তন করতে চান, যাতে সেগুলো আপনার সাইটের ডিজাইন বা থিমের সাথে মানানসই হয়। আইকনগুলোর জন্য কাস্টম স্টাইলিং করার মাধ্যমে আপনি আইকনের সাইজ, কালার, পজিশনিং এবং অন্যান্য ফিচার নিয়ন্ত্রণ করতে পারেন।
এখানে আমরা দেখব কিভাবে Font Awesome বা Bootstrap Icons ব্যবহার করে আইকনগুলোর কাস্টম স্টাইলিং করা যায়।
বুটস্ট্রাপ ৫ এর সাথে Font Awesome বা Bootstrap Icons ব্যবহার করা যেতে পারে। তবে, Font Awesome আইকন ব্যবহারের জন্য আপনাকে প্রথমে Font Awesome এর সিডিএন লিঙ্ক আপনার HTML ডকুমেন্টে যোগ করতে হবে।
<head>
<!-- Font Awesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>
<i class="fas fa-home"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-user"></i>
এখন, Font Awesome আইকনগুলো আপনার পেজে সঠিকভাবে প্রদর্শিত হবে।
আইকনের কাস্টম স্টাইলিং করার জন্য CSS ব্যবহার করতে হবে। আমরা কিভাবে আইকনের সাইজ, রঙ, মার্জিন, প্যাডিং ইত্যাদি কাস্টমাইজ করতে পারি তা নিচে দেখানো হল।
<style>
.custom-icon {
font-size: 30px; /* আইকনের সাইজ পরিবর্তন */
color: #3498db; /* আইকনের রঙ পরিবর্তন */
}
</style>
<i class="fas fa-home custom-icon"></i>
<i class="fas fa-envelope custom-icon"></i>
এখানে:
font-size: আইকনের সাইজ পরিবর্তন করতে ব্যবহার করা হয়েছে।color: আইকনের রঙ পরিবর্তন করা হয়েছে।<style>
.icon-center {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100px;
background-color: #ecf0f1;
border-radius: 50%;
font-size: 40px;
}
</style>
<div class="icon-center">
<i class="fas fa-heart"></i>
</div>
এখানে:
display: flex: আইকনকে ফ্লেক্স কন্টেইনারের মধ্যে সেন্টার করা হয়েছে।border-radius: 50%: আইকনকে একটি গোলাকার ব্যাকগ্রাউন্ডের মধ্যে সেন্টার করা হয়েছে।<style>
.icon-spacing {
font-size: 40px;
margin: 10px;
}
</style>
<i class="fas fa-star icon-spacing"></i>
<i class="fas fa-bell icon-spacing"></i>
<i class="fas fa-cogs icon-spacing"></i>
এখানে:
margin: আইকনের চারপাশে স্পেস যোগ করা হয়েছে যাতে আইকনগুলোর মধ্যে কিছু দূরত্ব থাকে।<style>
.icon-hover:hover {
color: #e74c3c; /* হোভার করলে আইকনের রঙ পরিবর্তন */
transform: scale(1.2); /* হোভার করলে আইকন বড় হবে */
transition: all 0.3s ease-in-out;
}
</style>
<i class="fas fa-thumbs-up icon-hover"></i>
<i class="fas fa-comments icon-hover"></i>
এখানে:
:hover: যখন আইকনে মাউস রাখা হবে, তখন তার রঙ পরিবর্তন হবে এবং সাইজ বাড়বে।বুটস্ট্রাপ ৫ তে Bootstrap Icons এর মাধ্যমে আইকন ব্যবহার করা হয়। এর জন্য Font Awesome এর মতো আলাদা CDN প্রয়োজন নেই, কারণ বুটস্ট্রাপ ৫-এ এটি বিল্ট-ইন রয়েছে।
<head>
<!-- Bootstrap Icons CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>
<i class="bi bi-alarm" style="font-size: 40px; color: #16a085;"></i>
<i class="bi bi-pencil" style="font-size: 30px; color: #f39c12;"></i>
এখানে:
bi bi-alarm এবং bi bi-pencil: এই ক্লাসগুলো বুটস্ট্রাপ আইকনের জন্য ব্যবহৃত।style: CSS দিয়ে স্টাইলিং করা হয়েছে।আইকনগুলোকে কাস্টমাইজ করা এবং আপনার ডিজাইনের সাথে মানানসই করা অত্যন্ত গুরুত্বপূর্ণ। আপনি CSS এবং বুটস্ট্রাপের ক্লাস ব্যবহার করে আইকনের সাইজ, রঙ, পজিশনিং, এবং ইফেক্ট সহজেই পরিবর্তন করতে পারেন। Font Awesome বা Bootstrap Icons সহ আইকনের স্টাইলিংয়ে বুটস্ট্রাপ ৫ অত্যন্ত সুবিধাজনক এবং দ্রুত কাজ করার উপায় প্রদান করে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
