{"id":2540,"date":"2017-06-21T16:07:00","date_gmt":"2017-06-21T16:07:00","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2540"},"modified":"2021-04-16T14:26:40","modified_gmt":"2021-04-16T14:26:40","slug":"bootstrap-responsive-table-data-listing","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/","title":{"rendered":"Bootstrap Responsive Table for Data Listing"},"content":{"rendered":"

The HTML table is the most used element in the web application. Basically, the HTML table is used to present the data in row and column format on the web page. It is most preferable to make tables responsive for a better user experience. If your web application uses Bootstrap, you can easily build a table design within a minute. Also, you can make the Bootstrap table responsive by adding a single class.<\/p>\n

In this tutorial, we will show you how to create a responsive table with Bootstrap. Using Bootstrap you can improve the appearance of the HTML table in an easy way and make a responsive table for different devices. The Bootstrap responsive table<\/b> is the perfect choice for data listing.<\/p>\n

The following different types of table examples help you to create horizontal tables with basic styling using Bootstrap.<\/p>\n

The Bootstrap and jQuery library need to be included to use Bootstrap framework.<\/p>\n

<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"<\/span>>\r\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script<\/span>>\r\n<script<\/span> src<\/span>=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"<\/span>><\/script<\/span>>\r\n<\/pre>\n
Basic Bootstrap Responsive Table<\/h2>\n
Use table<\/code> class to add basic style to the HTML table. The table-responsive<\/code> class makes table responsive.<\/p>\n
<div<\/span> class<\/span>=\"table-responsive\"<\/span>>\r\n    <table<\/span> class<\/span>=\"table\"<\/span>>\r\n        <thead<\/span>>\r\n            <tr<\/span>>\r\n                <th<\/span>>First Name<\/th<\/span>>\r\n                <th<\/span>>Last Name<\/th<\/span>>\r\n                <th<\/span>>Email<\/th<\/span>>\r\n            <\/tr<\/span>>\r\n        <\/thead<\/span>>\r\n        <tbody<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>John<\/td<\/span>>\r\n                <td<\/span>>Doe<\/td<\/span>>\r\n                <td<\/span>>john@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>Smith<\/td<\/span>>\r\n                <td<\/span>>Thomas<\/td<\/span>>\r\n                <td<\/span>>smith@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>Merry<\/td<\/span>>\r\n                <td<\/span>>Jim<\/td<\/span>>\r\n                <td<\/span>>merry@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n        <\/tbody<\/span>>\r\n    <\/table<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\n
\"basic-bootstrap-responsive-table-codexworld\"<\/div>\n
Striped Bootstrap Responsive Table<\/h2>\n
Use table-striped<\/code> class to add stripes to the HTML table.<\/p>\n
<div<\/span> class<\/span>=\"table-responsive\"<\/span>>\r\n    <table<\/span> class<\/span>=\"table table-striped\"<\/span>>\r\n        <thead<\/span>>\r\n            <tr<\/span>>\r\n                <th<\/span>>First Name<\/th<\/span>>\r\n                <th<\/span>>Last Name<\/th<\/span>>\r\n                <th<\/span>>Email<\/th<\/span>>\r\n            <\/tr<\/span>>\r\n        <\/thead<\/span>>\r\n        <tbody<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>John<\/td<\/span>>\r\n                <td<\/span>>Doe<\/td<\/span>>\r\n                <td<\/span>>john@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>Smith<\/td<\/span>>\r\n                <td<\/span>>Thomas<\/td<\/span>>\r\n                <td<\/span>>smith@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>Merry<\/td<\/span>>\r\n                <td<\/span>>Jim<\/td<\/span>>\r\n                <td<\/span>>merry@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n        <\/tbody<\/span>>\r\n    <\/table<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\n
\"striped-bootstrap-responsive-table-codexworld\"<\/div>\n
Hover Bootstrap Responsive Table<\/h2>\n
Use table-hover<\/code> class to add a hover effect to the HTML table rows.<\/p>\n
<div<\/span> class<\/span>=\"table-responsive\"<\/span>>\r\n    <table<\/span> class<\/span>=\"table table-hover\"<\/span>>\r\n        <thead<\/span>>\r\n            <tr<\/span>>\r\n                <th<\/span>>First Name<\/th<\/span>>\r\n                <th<\/span>>Last Name<\/th<\/span>>\r\n                <th<\/span>>Email<\/th<\/span>>\r\n            <\/tr<\/span>>\r\n        <\/thead<\/span>>\r\n        <tbody<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>John<\/td<\/span>>\r\n                <td<\/span>>Doe<\/td<\/span>>\r\n                <td<\/span>>john@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>Smith<\/td<\/span>>\r\n                <td<\/span>>Thomas<\/td<\/span>>\r\n                <td<\/span>>smith@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>Merry<\/td<\/span>>\r\n                <td<\/span>>Jim<\/td<\/span>>\r\n                <td<\/span>>merry@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n        <\/tbody<\/span>>\r\n    <\/table<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\n
\"hover-bootstrap-responsive-table-codexworld\"<\/div>\n
Bordered Bootstrap Responsive Table<\/h2>\n
Use table-bordered<\/code> class to add borders to the HTML table.<\/p>\n
<div<\/span> class<\/span>=\"table-responsive\"<\/span>>\r\n    <table<\/span> class<\/span>=\"table table-bordered\"<\/span>>\r\n        <thead<\/span>>\r\n            <tr<\/span>>\r\n                <th<\/span>>First Name<\/th<\/span>>\r\n                <th<\/span>>Last Name<\/th<\/span>>\r\n                <th<\/span>>Email<\/th<\/span>>\r\n            <\/tr<\/span>>\r\n        <\/thead<\/span>>\r\n        <tbody<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>John<\/td<\/span>>\r\n                <td<\/span>>Doe<\/td<\/span>>\r\n                <td<\/span>>john@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>Smith<\/td<\/span>>\r\n                <td<\/span>>Thomas<\/td<\/span>>\r\n                <td<\/span>>smith@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n            <tr<\/span>>\r\n                <td<\/span>>Merry<\/td<\/span>>\r\n                <td<\/span>>Jim<\/td<\/span>>\r\n                <td<\/span>>merry@example.com<\/td<\/span>>\r\n            <\/tr<\/span>>\r\n        <\/tbody<\/span>>\r\n    <\/table<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\n
\"bordered-bootstrap-responsive-table-codexworld\"<\/div>\n","protected":false},"excerpt":{"rendered":"
The HTML table is the most used element in the web application. Basically, the HTML table is used to present the data in row and column format on the web page. It is most preferable <\/p>\n","protected":false},"author":1,"featured_media":2541,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[274],"tags":[275,179],"class_list":["post-2540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap","tag-html","cat-274-id","has_thumb"],"yoast_head":"\nBootstrap Responsive Table for Data Listing - CodexWorld<\/title>\n<meta name=\"description\" content=\"Bootstrap Responsive Table - Learn how to create tables with Bootstrap. Example HTML to create horizontal tables for data listing with basic styling using Bootstrap.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Responsive Table for Data Listing - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Bootstrap Responsive Table - Learn how to create tables with Bootstrap. Example HTML to create horizontal tables for data listing with basic styling using Bootstrap.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-21T16:07:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-16T14:26:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/06\/bootstrap-responsive-table-data-listing-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Bootstrap Responsive Table for Data Listing\",\"datePublished\":\"2017-06-21T16:07:00+00:00\",\"dateModified\":\"2021-04-16T14:26:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/\"},\"wordCount\":220,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/bootstrap-responsive-table-data-listing-codexworld.png\",\"keywords\":[\"Bootstrap\",\"HTML\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/\",\"name\":\"Bootstrap Responsive Table for Data Listing - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/bootstrap-responsive-table-data-listing-codexworld.png\",\"datePublished\":\"2017-06-21T16:07:00+00:00\",\"dateModified\":\"2021-04-16T14:26:40+00:00\",\"description\":\"Bootstrap Responsive Table - Learn how to create tables with Bootstrap. Example HTML to create horizontal tables for data listing with basic styling using Bootstrap.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/bootstrap-responsive-table-data-listing-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/bootstrap-responsive-table-data-listing-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"bootstrap-responsive-table-data-listing-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-responsive-table-data-listing\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap Responsive Table for Data Listing\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Responsive Table for Data Listing - CodexWorld","description":"Bootstrap Responsive Table - Learn how to create tables with Bootstrap. Example HTML to create horizontal tables for data listing with basic styling using Bootstrap.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Responsive Table for Data Listing - CodexWorld","og_description":"Bootstrap Responsive Table - Learn how to create tables with Bootstrap. Example HTML to create horizontal tables for data listing with basic styling using Bootstrap.","og_url":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-06-21T16:07:00+00:00","article_modified_time":"2021-04-16T14:26:40+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/06\/bootstrap-responsive-table-data-listing-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Bootstrap Responsive Table for Data Listing","datePublished":"2017-06-21T16:07:00+00:00","dateModified":"2021-04-16T14:26:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/"},"wordCount":220,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/06\/bootstrap-responsive-table-data-listing-codexworld.png","keywords":["Bootstrap","HTML"],"articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/","url":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/","name":"Bootstrap Responsive Table for Data Listing - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/06\/bootstrap-responsive-table-data-listing-codexworld.png","datePublished":"2017-06-21T16:07:00+00:00","dateModified":"2021-04-16T14:26:40+00:00","description":"Bootstrap Responsive Table - Learn how to create tables with Bootstrap. Example HTML to create horizontal tables for data listing with basic styling using Bootstrap.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/06\/bootstrap-responsive-table-data-listing-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/06\/bootstrap-responsive-table-data-listing-codexworld.png","width":1366,"height":768,"caption":"bootstrap-responsive-table-data-listing-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/bootstrap-responsive-table-data-listing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Responsive Table for Data Listing"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/06\/bootstrap-responsive-table-data-listing-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-EY","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2540"}],"version-history":[{"count":6,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2540\/revisions"}],"predecessor-version":[{"id":4635,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2540\/revisions\/4635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2541"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}