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

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

📋বুটস্ট্র্যাপ হলো টেবিলের সারি ও কলাম তৈরি করার পদ্ধতি।

⚒️বুটস্ট্র্যাপ টেবিলের সারি ও কলাম তৈরি করতে ব্যবহৃত হয়।

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

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

➡️ table - টেবিল উপস্থাপনা তৈরি করা
➡️ table-striped - সারিগুলোতে পর্যায়ক্রমে ব্যাকগ্রাউন্ড নির্ধারণ করা
➡️ table-bordered - টেবিল ও এর সেলগুলোতে বর্ডার যুক্ত করা
➡️ table-hover - মাউস পয়েন্টারহাইলাইট করা
➡️ table-borderless - টেবিলের বর্ডার অপসারণ করা
➡️ table-dark - টেবিলে ডার্ক স্টাইল নির্ধারণ করা
➡️ table-primary - টেবিলে প্রাইমারি স্টাইল নির্ধারণ করা
➡️ table-success - টেবিলে সাকসেস স্টাইল নির্ধারণ করা
➡️ table-danger - টেবিলে ডেঞ্জার স্টাইল নির্ধারণ করা
➡️ table-info - টেবিলে ইনফো স্টাইল নির্ধারণ করা
➡️ table-warning - টেবিলে ওয়ার্নিং স্টাইল নির্ধারণ করা
➡️ table-active - টেবিল বা সারিতে সক্রিয় স্টাইল নির্ধারণ করা
➡️ table-secondary - টেবিলে সেকেন্ডারি স্টাইল নির্ধারণ করা
➡️ table-light - টেবিলে লাইট স্টাইল নির্ধারণ করা

table - টেবিল উপস্থাপনা তৈরি করার উদাহরণ।

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>

<table class="table">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-striped - সারিগুলোতে পর্যায়ক্রমে ব্যাকগ্রাউন্ড নির্ধারণ করার উদাহরণ।

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>

<table class="table table-striped">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-bordered - টেবিল ও এর সেলগুলোতে বর্ডার যুক্ত করার উদাহরণ।

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>

<table class="table table-bordered">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-hover - মাউস পয়েন্টারহাইলাইট করার উদাহরণ।

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>

<table class="table table-hover">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-borderless - টেবিলের বর্ডার অপসারণ করার উদাহরণ।

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>

<table class="table table-borderless">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-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>

<table class="table table-dark">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-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>

<table class="table table-primary">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-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>

<table class="table table-success">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-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>

<table class="table table-danger">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-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>

<table class="table table-info">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-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>

<table class="table table-warning">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-active - টেবিল বা সারিতে সক্রিয় স্টাইল নির্ধারণ করার উদাহরণ।

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>

<table class="table table-active">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-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>

<table class="table table-secondary">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

table-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>

<table class="table table-light">
  <tr>
    <th>আইডি</th>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>10</td>
    <td>তানিম</td>
    <td>বাংলাদেশ</td>
  </tr>
  <tr>
    <td>11</td>
    <td>জোহান</td>
    <td>নেদারল্যান্ড</td>
  </tr>
  <tr>
    <td>12</td>
    <td>হামিদ</td>
    <td>আফগানিস্তান</td>
  </tr>
  <tr>
    <td>13</td>
    <td>সাকিব</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

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

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

নাম	বিবরণ
table	টেবিল উপস্থাপনা তৈরি করতে ব্যবহৃত হয়।
table-striped	সারিগুলোতে পর্যায়ক্রমে ব্যাকগ্রাউন্ড নির্ধারণ করতে ব্যবহৃত হয়।
table-bordered	টেবিল ও এর সেলগুলোতে বর্ডার যুক্ত করতে ব্যবহৃত হয়।
table-hover	মাউস পয়েন্টারহাইলাইট করতে ব্যবহৃত হয়।
table-borderless	টেবিলের বর্ডার অপসারণ করতে ব্যবহৃত হয়।
table-dark	টেবিলে ডার্ক স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।
table-primary	টেবিলে প্রাইমারি স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।
table-success	টেবিলে সাকসেস স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।
table-danger	টেবিলে ডেঞ্জার স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।
table-info	টেবিলে ইনফো স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।
table-warning	টেবিলে ওয়ার্নিং স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।
table-active	টেবিল বা সারিতে সক্রিয় স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।
table-secondary	টেবিলে সেকেন্ডারি স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।
table-light	টেবিলে লাইট স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।