টেবুলসমূহ

বুটষ্ট্ৰেপৰ সৈতে টেবুলসমূহৰ অপ্ট-ইন ষ্টাইলিঙৰ বাবে দস্তাবেজ আৰু উদাহৰণসমূহ (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>