টেবুলসমূহ
বুটষ্ট্ৰেপৰ সৈতে টেবুলসমূহৰ অপ্ট-ইন ষ্টাইলিঙৰ বাবে দস্তাবেজ আৰু উদাহৰণসমূহ (JavaScript প্লাগইনসমূহত সিহতৰ প্ৰচলিত ব্যৱহাৰ দিয়া হৈছে)।
উদাহৰণ
কেলেণ্ডাৰ আৰু তাৰিখ পিকাৰৰ দৰে তৃতীয়-পক্ষ ৱিজেটসমূহত টেবুলসমূহৰ ব্যাপক ব্যৱহাৰৰ বাবে, আমি আমাৰ টেবুলসমূহ অপ্ট-ইন হ'বলৈ ডিজাইন কৰিছো । .tableমাত্ৰ যিকোনো ত ভিত্তি শ্ৰেণী যোগ কৰক <table>, তাৰ পিছত কাষ্টম শৈলী বা আমাৰ বিভিন্ন অন্তৰ্ভুক্ত পৰিবৰ্তক শ্ৰেণীৰ সৈতে সম্প্ৰসাৰিত কৰক।
আটাইতকৈ মূল টেবুল মাৰ্কআপ ব্যৱহাৰ কৰি, ইয়াত .table-ভিত্তিয় টেবুলসমূহ Bootstrap ত কেনেকৈ দেখা যায় । সকলো টেবুল শৈলী Bootstrap 4 ত উত্তৰাধিকাৰী সূত্ৰে পোৱা যায় , অৰ্থাৎ যিকোনো নেষ্টেড টেবুলসমূহক অভিভাৱকৰ দৰে একে ধৰণে শৈলী কৰা হ'ব ।
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী | চৰাই | @টুইটাৰত | 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>আপুনি ৰংসমূহ ওলোটা কৰিব পাৰে—গাঢ় পটভূমিত পোহৰ লিখনীৰ সৈতে—ৰ সৈতে .table-dark।
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী | চৰাই | @টুইটাৰত | 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>টেবুল হেড বিকল্পসমূহ
টেবুল আৰু গাঢ় টেবুলৰ দৰেই, পৰিবৰ্তক শ্ৰেণীসমূহ ব্যৱহাৰ কৰক বা .thead-lights ক পাতল বা গাঢ় ধূসৰ দেখাবলৈ।.thead-dark<thead>
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী | চৰাই | @টুইটাৰত | 
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী | চৰাই | @টুইটাৰত | 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>ডাঠ শাৰী
.table-stripedৰ ভিতৰত যিকোনো টেবুল শাৰীত জেব্ৰা-ষ্ট্ৰাইপিং যোগ কৰিবলৈ ব্যৱহাৰ কৰক <tbody>।
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী | চৰাই | @টুইটাৰত | 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী | চৰাই | @টুইটাৰত | 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>সীমাৰেখাযুক্ত টেবুল
.table-borderedটেবুল আৰু ঘৰৰ সকলো ফালে থকা সীমাৰ বাবে যোগ কৰক ।
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী দ্য বাৰ্ড | @টুইটাৰত | |
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী দ্য বাৰ্ড | @টুইটাৰত | |
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>সীমাহীন টেবুল
.table-borderlessসীমাহীন টেবুলৰ বাবে যোগ কৰক ।
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী দ্য বাৰ্ড | @টুইটাৰত | |
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>.table-borderlessআন্ধাৰ টেবুলতো ব্যৱহাৰ কৰিব পাৰি।
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী দ্য বাৰ্ড | @টুইটাৰত | |
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>উঠাব পৰা শাৰী
.table-hoverএটা ৰ ভিতৰত টেবুল শাৰীসমূহত এটা হ'ভাৰ অৱস্থা সামৰ্থবান কৰিবলে যোগ কৰক <tbody>।
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী দ্য বাৰ্ড | @টুইটাৰত | |
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী দ্য বাৰ্ড | @টুইটাৰত | |
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>সৰু টেবুল
.table-smচেল পেডিং আধা কাটি টেবুলবোৰ অধিক কম্পেক্ট কৰিবলৈ যোগ কৰক ।
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী দ্য বাৰ্ড | @টুইটাৰত | |
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী দ্য বাৰ্ড | @টুইটাৰত | |
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>প্ৰসংগভিত্তিক শ্ৰেণীসমূহ
টেবুল শাৰী বা ব্যক্তিগত ঘৰসমূহ ৰং কৰিবলৈ প্ৰসংগভিত্তিক শ্ৰেণীসমূহ ব্যৱহাৰ কৰক।
| শ্ৰেণী | শিৰোনাম | শিৰোনাম | 
|---|---|---|
| সক্ৰিয় | কোষ | কোষ | 
| ডিফল্ট | কোষ | কোষ | 
| প্ৰাথমিক | কোষ | কোষ | 
| মাধ্যমিক | কোষ | কোষ | 
| সফলতা | কোষ | কোষ | 
| বিপদ | কোষ | ��োষ | 
| সতৰ্কবাণী | কোষ | কোষ | 
| তথ্য | কোষ | কোষ | 
| পাতল | কোষ | কোষ | 
| অন্ধকাৰ | কোষ | কোষ | 
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>নিয়মিত টেবুল পটভূমি ভিন্নতাসমূহ গাঢ় টেবুলৰ সৈতে উপলব্ধ নহয়, অৱশ্যে, আপুনি একে ধৰণৰ শৈলীসমূহ লাভ কৰিবলে লিখনী বা পটভূমি সঁজুলিসমূহ ব্যৱহাৰ কৰিব পাৰে।
| # | শিৰোনাম | শিৰোনাম | 
|---|---|---|
| ১ | কোষ | কোষ | 
| ২ | কোষ | কোষ | 
| ৩ | কোষ | কোষ | 
| ৪ | কোষ | কোষ | 
| ৫ | কোষ | কোষ | 
| ৬ | কোষ | কোষ | 
| ৭ | কোষ | কোষ | 
| ৮ | কোষ | কোষ | 
| ৯ | কোষ | কোষ | 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>সহায়ক প্ৰযুক্তিসমূহলৈ অৰ্থ প্ৰদান কৰা
অৰ্থ যোগ কৰিবলৈ ৰং ব্যৱহাৰ কৰিলে কেৱল এটা দৃশ্যমান ইংগিতহে পোৱা যায়, যিটো সহায়ক প্ৰযুক্তিৰ ব্যৱহাৰকাৰীসকলক প্ৰেৰণ কৰা নহ’ব – যেনে স্ক্ৰীণ ৰিডাৰ। সুনিশ্চিত কৰক যে ৰঙেৰে চিহ্নিত তথ্য হয় বিষয়বস্তুৰ পৰা নিজেই স্পষ্ট (যেনে দৃশ্যমান লিখনী), বা বিকল্প উপায়ৰ যোগেদি অন্তৰ্ভুক্ত কৰা হৈছে, যেনে .sr-onlyশ্ৰেণীৰ সৈতে লুকুৱাই ৰখা অতিৰিক্ত লিখনী।
576px, 768px, 992px, আৰু 1120px লৈকে (কিন্তু অন্তৰ্ভুক্ত নকৰাকৈ) প্ৰতিটো ব্ৰেকপইণ্টত টেবুলক অনুভূমিকভাৱে স্ক্ৰল কৰি যিকোনো .tableএটা ৰেপ কৰি প্ৰতিক্ৰিয়াশীল টেবুল সৃষ্টি কৰক ।.table-responsive{-sm|-md|-lg|-xl}max-width
মন কৰিব যে যিহেতু ব্ৰাউজাৰসমূহে বৰ্তমানে পৰিসীমা প্ৰসংগ প্ৰশ্নসমূহ সমৰ্থন নকৰে, আমি এই তুলনাসমূহৰ বাবে অধিক নিখুঁততাৰে মানসমূহ ব্যৱহাৰ কৰি ভগ্নাংশ প্ৰস্থৰ সৈতে min-আৰু max-উপসৰ্গ আৰু দৃশ্যপৰ্টসমূহৰ সীমাবদ্ধতাসমূহৰ ওপৰত কাম কৰোঁ (যিটো উচ্চ-dpi ডিভাইচসমূহত কিছুমান অৱস্থাত হ'ব পাৰে, উদাহৰণস্বৰূপ)। .
কেপচনসমূহ
A এ <caption>টেবুলৰ বাবে হেডিঙৰ দৰে কাম কৰে। ই স্ক্ৰীণ ৰিডাৰ থকা ব্যৱহাৰকাৰীসকলক এটা টেবুল বিচাৰি উলিয়াবলৈ আৰু ইয়াৰ বিষয়ে বুজিবলৈ আৰু তেওঁলোকে ইয়াক পঢ়িব বিচাৰে নে নাই সেইটো সিদ্ধান্ত ল’বলৈ সহায় কৰে।
| # | প্ৰথম | অন্তিম | চম্ভালা | 
|---|---|---|---|
| ১ | মাৰ্ক | অট্টো | @mdo | 
| ২ | যাকোব | থৰ্ণ্টন | @শকত | 
| ৩ | লেৰী | চৰাই | @টুইটাৰত | 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>প্ৰতিক্ৰিয়াশীল টেবুল
প্ৰতিক্ৰিয়াশীল টেবুলসমূহে টেবুলসমূহক সহজে অনুভূমিকভাৱে স্ক্ৰল কৰাৰ অনুমতি দিয়ে। .tableএটা ৰ সৈতে ৰেপ কৰি সকলো দৰ্শনপৰ্টত যিকোনো টেবুলক প্ৰতিক্ৰিয়াশীল কৰক .table-responsive। অথবা, এটা সৰ্বাধিক ব্ৰেকপইন্ট বাছক যাৰ সৈতে এটা প্ৰতিক্ৰিয়াশীল টেবুল ব্যৱহাৰ কৰি .table-responsive{-sm|-md|-lg|-xl}।
উলম্ব ক্লিপিং/ট্ৰাংকেচন
প্ৰতিক্ৰিয়াশীল টেবুলসমূহে ব্যৱহাৰ কৰে overflow-y: hidden, যি টেবুলৰ তলৰ বা ওপৰৰ প্ৰান্তৰ বাহিৰলৈ যোৱা যিকোনো বিষয়বস্তু ক্লিপ অফ কৰে। বিশেষকৈ, ই ড্ৰপডাউন মেনুসমূহ আৰু অন্য তৃতীয়-পক্ষ ৱিজেটসমূহ ক্লিপ অফ কৰিব পাৰে।
সদায় সঁহাৰি জনোৱা
প্ৰতিটো ব্ৰেকপইণ্টৰ ওপৰেৰে, .table-responsiveঅনুভূমিকভাৱে স্ক্ৰল কৰা টেবুলসমূহৰ বাবে ব্যৱহাৰ কৰক।
| # | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | 
|---|---|---|---|---|---|---|---|---|---|
| ১ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
| ২ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
| ৩ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>ব্ৰেকপইন্ট নিৰ্দিষ্ট
.table-responsive{-sm|-md|-lg|-xl}এটা নিৰ্দিষ্ট ব্ৰেকপইণ্টলৈকে প্ৰতিক্ৰিয়াশীল টেবুল সৃষ্টি কৰিবলৈ প্ৰয়োজন অনুসৰি ব্যৱহাৰ কৰক । সেই ব্ৰেকপইণ্টৰ পৰা আৰু ওপৰলৈ, টেবুলখনে সাধাৰণভাৱে আচৰণ কৰিব আৰু অনুভূমিকভাৱে স্ক্ৰল নকৰিব।
এই টেবুলসমূহ ভঙা যেন দেখা যাব পাৰে যেতিয়ালৈকে সিহতৰ প্ৰতিক্ৰিয়াশীল শৈলীসমূহ নিৰ্দিষ্ট দৰ্শনপৰ্ট প্ৰস্থত প্ৰযোজ্য নহয়।
| # | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | 
|---|---|---|---|---|---|---|---|---|
| ১ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
| ২ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
| ৩ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>| # | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | 
|---|---|---|---|---|---|---|---|---|
| ১ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
| ২ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
| ৩ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>| # | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | 
|---|---|---|---|---|---|---|---|---|
| ১ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
| ২ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
| ৩ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>| # | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | শিৰোনাম | 
|---|---|---|---|---|---|---|---|---|
| ১ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
| ২ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
| ৩ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | কোষ | 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>