বুটস্ট্র্যাপ

🌈বুটস্ট্র্যাপ কি?

📋বুটস্ট্র্যাপ হলো সীমানা নির্দিষ্ট করার পদ্ধতি।

⚒️বুটস্ট্র্যাপ সীমানা নির্দিষ্ট করতে ব্যবহৃত হয়।

বুটস্ট্র্যাপ সমূহ

বুটস্ট্র্যাপ এবং সেগুলোর ব্যবহারের তালিকা

➡️ border - বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
➡️ border-start - বর্ডারের বাম পাশ নির্ধারণ করা
➡️ border-end - বর্ডারের ডান পাশ নির্ধারণ করা
➡️ border-top - উপরের বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
➡️ border-bottom - নিচের বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
➡️ border-0 - বর্ডার অপসারণ করা
➡️ border-1 - ১ ইউনিট পুরু বর্ডার নির্ধারণ করা
➡️ border-2 - ২ ইউনিট পুরু বর্ডার নির্ধারণ করা
➡️ border-3 - ৩ ইউনিট পুরু বর্ডার নির্ধারণ করা
➡️ border-4 - ৪ ইউনিট পুরু বর্ডার নির্ধারণ করা
➡️ border-5 - ৫ ইউনিট পুরু বর্ডার নির্ধারণ করা
➡️ border-primary - বর্ডারের রং primary নির্ধারণ করা
➡️ border-secondary - বর্ডারের রং secondary নির্ধারণ করা
➡️ border-success - বর্ডারের রং success নির্ধারণ করা
➡️ border-danger - বর্ডারের রং danger নির্ধারণ করা
➡️ border-warning - বর্ডারের রং warning নির্ধারণ করা
➡️ border-info - বর্ডারের রং info নির্ধারণ করা
➡️ border-light - বর্ডারের রং light নির্ধারণ করা
➡️ border-dark - বর্ডারের রং dark নির্ধারণ করা
➡️ border-white - বর্ডারের রং সাদা নির্ধারণ করা

border - বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-primary border-5">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-start - বর্ডারের বাম পাশ নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border-start border-primary border-5">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-end - বর্ডারের ডান পাশ নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border-end border-primary border-5">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-top - উপরের বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border-top border-primary border-5">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-bottom - নিচের বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border-bottom border-primary border-5">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-0 - বর্ডার অপসারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-primary border-0">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-1 - ১ ইউনিট পুরু বর্ডার নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-primary border-1">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-2 - ২ ইউনিট পুরু বর্ডার নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-primary border-2">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-3 - ৩ ইউনিট পুরু বর্ডার নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-primary border-3">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-4 - ৪ ইউনিট পুরু বর্ডার নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-primary border-4">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-5 - ৫ ইউনিট পুরু বর্ডার নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-primary border-5">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-primary - বর্ডারের রং primary নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-primary border-4">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-secondary - বর্ডারের রং secondary নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-secondary border-4">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-success - বর্ডারের রং success নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-success border-4">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-danger - বর্ডারের রং danger নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-danger border-4">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-warning - বর্ডারের রং warning নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-warning border-4">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-info - বর্ডারের রং info নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-info border-4">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-light - বর্ডারের রং light নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-light border-4">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-dark - বর্ডারের রং dark নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-dark border-4">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

border-white - বর্ডারের রং সাদা নির্ধারণ করার উদাহরণ।

bootstrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="border border-white border-4">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

বুটস্ট্র্যাপ সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম	বিবরণ
border	বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়।
border-start	বর্ডারের বাম পাশ নির্ধারণ করতে ব্যবহৃত হয়।
border-end	বর্ডারের ডান পাশ নির্ধারণ করতে ব্যবহৃত হয়।
border-top	উপরের বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়।
border-bottom	নিচের বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়।
border-0	বর্ডার অপসারণ করতে ব্যবহৃত হয়।
border-1	১ ইউনিট পুরু বর্ডার নির্ধারণ করতে ব্যবহৃত হয়।
border-2	২ ইউনিট পুরু বর্ডার নির্ধারণ করতে ব্যবহৃত হয়।
border-3	৩ ইউনিট পুরু বর্ডার নির্ধারণ করতে ব্যবহৃত হয়।
border-4	৪ ইউনিট পুরু বর্ডার নির্ধারণ করতে ব্যবহৃত হয়।
border-5	৫ ইউনিট পুরু বর্ডার নির্ধারণ করতে ব্যবহৃত হয়।
border-primary	বর্ডারের রং primary নির্ধারণ করতে ব্যবহৃত হয়।
border-secondary	বর্ডারের রং secondary নির্ধারণ করতে ব্যবহৃত হয়।
border-success	বর্ডারের রং success নির্ধারণ করতে ব্যবহৃত হয়।
border-danger	বর্ডারের রং danger নির্ধারণ করতে ব্যবহৃত হয়।
border-warning	বর্ডারের রং warning নির্ধারণ করতে ব্যবহৃত হয়।
border-info	বর্ডারের রং info নির্ধারণ করতে ব্যবহৃত হয়।
border-light	বর্ডারের রং light নির্ধারণ করতে ব্যবহৃত হয়।
border-dark	বর্ডারের রং dark নির্ধারণ করতে ব্যবহৃত হয়।
border-white	বর্ডারের রং সাদা নির্ধারণ করতে ব্যবহৃত হয়।