সাধারণভাবে একটি টেবিল একটি সারি এবং কলামের সেটের মধ্যে সম্পর্ক বর্ণনা করে। ডেটা সংগঠিত এবং ব্যাখ্যা করার জন্য এটি একটি চমৎকার উপায়।
বুটস্ট্র্যাপ একটি সিএসএস ফ্রেমওয়ার্ক যা আমাদের কন্টেন্ট খুব দ্রুত তৈরি করতে সাহায্য করতে পারে। এই আর্টিকেলে আমরা বুটস্ট্র্যাপ সেট আপ করার পদ্ধতি রিভিউ করব, কেন আমাদের একটি টেবিল দরকার হতে পারে সেটি শিখব, এবং বুটস্ট্র্যাপ ফ্রেমওয়ার্ক ব্যবহার করে টেবিলের কিছু উদাহরণ একশনে দেখব।
শুরু করা
আমাদের ওয়েব পেজে একটি মডাল দেখতে পাওয়ার জন্য, নিশ্চিত করুন যে সঠিক ডিপেন্ডেন্সিগুলো আছে। এই ডেমো için, আমাদের বুটস্ট্র্যাপ, Popper.JS এবং jQuery দরকার নয়, তবে এগুলো যোগ করাই ভালো কারণ আপনি সম্ভবত অন্যান্য কম্পোনেন্টের সাথে কাজ করবেন যেগুলো এগুলো দরকার করে। ডিপেন্ডেন্সিগুলো পেতে সহায়তার জন্য বুটস্ট্র্যাপের Quick Start পেজে যান।
আমাদের যা প্যাকেজগুলো লিংক করতে হবে সেটি কীভাবে করবেন সেটি আপনার ওপর নির্ভর, কিন্তু সবচেয়ে সহজ, সবচেয়ে বিগিনার-ফ্রেন্ডলি উপায় হলো jQuery, Popper.js, এবং বুটস্ট্র্যাপের জন্য কন্টেন্ট ডেলিভারি নেটওয়ার্ক—সিডিএন (CDN) ব্যবহার করা। আপনার <script> ট্যাগের অর্ডারের প্রতি সতর্ক থাকুন—অর্ডার এখানে গুরুত্বপূর্ণ।
টেবিল কখন ব্যবহার করবেন
টেবিল ব্যবহার করুন যখন আপনি একবারে অনেক ডেটা এগ্গ্রিগেট করতে চান। বুটস্ট্র্যাপ টেবিল ব্যবহার করুন когда আপনি রেসপন্সিভ টেবিল সহজে তৈরি করতে চান। বুটস্ট্র্যাপ টেবিলের বেসিক এইচটিএমএল স্ট্রাকচার ব্যবহার করে। আপনাকে শুধু তাদের সিএসএস এবং আপনার কাস্টম স্টাইলিং ইনকর্পোরেট করতে হবে আপনার ওয়েবসাইটের জন্য কাস্টমাইজড, রেসপন্সিভ টেবিল পেতে।
বুটস্ট্র্যাপ ব্যবহার করে একটি টেবিল তৈরি করা
টেবিলরা традиционভাবে এইচটিএমএল এবং সিএসএস দিয়ে বিল্ড করা হয়। এটা আমাদের টেবিলের বেসিক স্ট্রাকচার এবং স্টাইলিং স্ক্রিনে পেতে দেবে। আমরা বুটস্ট্র্যাপ ব্যবহার করি একটি রেসপন্সিভ ডিজাইন দ্রুত আপ 앤 রেডি করার জন্য যাতে আমরা আমাদের টু-ডু লিস্টের হায়ার প্রায়োরিটি আইটেমগুলোর দিকে যেতে পারি।
বুটস্ট্র্যাপ ব্যবহার করার সময়, ডকুমেন্টেশন হাতে রাখুন যাতে আপনি সঠিকভাবে টেবিল স্ট্রাকচার করতে পারেন। একটি টেবিলে মডাল বা ন্যাববারের বিপরীতে ভিন্নতা হলো এটি জাভাস্ক্রিপ্টের ওপর না নির্ভর করে কাজ করার জন্য যাতে এটি আরও একটি কন্টেন্ট ফিচার হিসেবে বিবেচিত হয় বরং একটি আকচুয়াল কম্পোনেন্ট নয়। আপনি টেবিল কীভাবে তৈরি করবেন সেটি সম্পর্কে ইনফরমেশন পাবেন সাইডবারের Content মেনুর অধীনে Components মেনুর বদলে।
চলুন একটি বেসিক স্ট্রাকচার দিয়ে শুরু করি:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table> <thead> <tr> <th>Bootstrap Table Demo</th> </tr> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
আপনি যদি উপরের মার্কআপটি রান করেন, তবে আপনি একটি খুব বেসিক টেবিল দেখবেন যাতে একটি হেডার এবং ড্রিংক, প্রাইস এবং তাদের সারি নম্বর বর্ণনা করার বেশ কিছু সারি রয়েছে। বুটস্ট্র্যাপ পুরো ডকুমেন্টের জন্য যা thiếtলাপ করা আছে সেটি বাদে কোনো স্টাইলিং নেই।
একটি টেবিলে স্টাইলিং যোগ করতে, আপনাকে শুধু .table ক্লাসটি <table> ট্যাগে যোগ করতে হবে।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table"> <thead> <tr> <th scope="colgroup"> Bootstrap Table Demo</th> </tr> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
এটি টেবিলে খুব বেসিক স্টাইলিং এবং রেসপন্সিভনেস যোগ করে। চলুন দেখি আমরা কীভাবে আরও স্টাইলিং কাস্টমাইজ করতে পারি আমাদের দরকার অনুযায়ী।
ডিফল্ট রঙ ইনভার্ট করা (Invert Default Colors)
আপনার <table> ট্যাগে ক্লাস নেমের লিস্টে .table-এর পাশাপাশি .table-dark যোগ করুন টেবিলের বেসিক কালার স্কিমকে ডার্ক করতে।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-dark"> <thead> <tr> <th scope="colgroup"> Bootstrap Table Demo</th> </tr> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
আপনি বেসিক বুটস্ট্র্যাপ কালার প্রপার্টিগুলোও ডার্ক এবং লাইটের পাশাপাশি ব্যবহার করতে পারেন কন্টেক্সটুয়াল ক্লাস নিয়ন্ত্রণ করতে (যেমন .table-primary, table-danger, table-success, ইত্যাদি।)
<thead> স্টাইল অপশনস
আপনি যদি টেবিলের হেডের কালার স্কিমকে বডি থেকে আলাদা নিয়ন্ত্রণ করতে চান, তবে আপনি .thead-dark বা .thead-light <thead> ক্লাস অ্যাট্রিবিউটে যোগ করে এটি করতে পারেন।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-danger"> <thead class="thead-light"> <th>Bootstrap Table Demo</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
স্ট্রাইপস (Stripes)
<table> ট্যাগে .table-striped যোগ করুন একটি টেবিলে এক অনুপাত সারির রঙ অ্যাডজাস্ট করতে।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-striped table-warning"> <thead class="thead-light"> <th>Bootstrap Table Demo With Stripes</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
বর্ডার (Borders)
প্রতিটি সেলের সব পাশে বর্ডার যোগ করতে .table-bordered ব্যবহার করুন—প্রতিটি সেলের সব পাশ থেকে বর্ডার রিমুভ করতে .table-borderless ব্যবহার করুন।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-primary table-bordered"> <thead class="thead-light"> <th>Bootstrap Table Demo With Borders</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <table class="table table-primary table-borderless"> <thead class="thead-light"> <th>Bootstrap Table Demo Without Borders</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
হোভার (Hover)
<table> ট্যাগের ক্লাস অ্যাট্রিবিউটে .table-hover যোগ করলে <tbody>-এ থাকা সব সারি হোভারেবল (hoverable) হয়ে যাবে।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-hover table-primary table-bordered"> <thead class="thead-light"> <th>Bootstrap Table Demo With Hover</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script></body> </html>
রেসপন্সিভ টেবিলস (Responsive Tables)
আপনার <table>-কে একটি <div>-এর সাথে এনক্যাপসুলেট করুন যার ক্লাস নাম .table-responsive আপনার টেবিলকে সব ব্রেকপয়েন্টে রেসপন্সিভ করতে। এটি বেসিকলে আপনার টেবিলকে হরিজন্টালি স্ক্রলযোগ্য করে দেয় যদি কন্টেন্টটি কখনো টেবিলের সাইজ দ্বারা ট্রাঙ্কেটেড হয়।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-hover table-primary table-bordered"> <thead class="thead-light"> <th>Bootstrap Table Demo With Hover</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script></body> </html>
উপসংহার
বুটস্ট্র্যাপ আপনার এইচটিএমএলের সাথে কম্বাইন করে টেবিল কাস্টমাইজ করার অনেক উপায় রয়েছে। আপনি এই টেবিল স্টাইল করার উপায়গুলো মাস্টার করলে, আপনার নিজস্ব কাস্টমাইজেবল স্টাইল ব্যবহার করে চেষ্টা করুন!
