এটা করার জন্য Bootsrap এর রেডিমেট টোস্ট ব্যবহার করতে পারি। টোস্ট পেতে এখানে ক্লিক করুন।
এখন একটা বিষয় লক্ষ্যণীয়ঃ
বুটস্ট্রাপে যে টোস্ট গুলা রয়েছে সেগুলা যদি কপি করে পেষ্ট করেন তাহলে কিন্ত সেটা ওয়েবসাইটে শো করবে না। কারণ সেখানে show নামে একটা class এড করা থাকে না। সো আমাদেরকে সেটা এড করে নিলেই হয়ে যাবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Toast in Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<p><strong>Note:</strong> The <code>.show</code> is added to display the toast, and the class <code>.fade</code> apply a CSS fade transition to the toast. By default, toast it is hidden.</p>
<div class="toast fade show" id="myToast">
<div class="toast-header">
<strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
</div>
</div>
</div>
</body>
</html>
আউটপুটঃ
Post a Comment