{"id":8524,"date":"2015-11-25T16:15:42","date_gmt":"2015-11-25T14:15:42","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=8524"},"modified":"2018-01-08T13:28:08","modified_gmt":"2018-01-08T11:28:08","slug":"bootstrap-table-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/","title":{"rendered":"Bootstrap Table Example"},"content":{"rendered":"<p>The aim of this example is to show the various Bootstrap tables that you can use in your web projects. Unless you&#8217;ve been living under a rock, you already know what a table is. <\/p>\n<p>Tables are used to represent a set of data systematically displayed, especially in columns. That makes it easier for us to see and understand each cell&#8217;s information in a practical manner.<\/p>\n<p>What Bootstrap adds to traditional tables of HTML, is certainly styling, which is the key to make a difference in layout and design. It uses simple syntax by using default tags and added classes to modify the style.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;57DHuNTHJ2qczaGz&#8217;]<\/p>\n<h2>1. Initial Setup<\/h2>\n<p>The following initial setup is required in order to continue with tables demonstration.<\/p>\n<h3>1.1 Bootstrap Setup<\/h3>\n<p>To begin, make sure you&#8217;ve set up Bootstrap files and your HTML file in the following structure:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-1.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-1.jpg\" alt=\"tables-1\" width=\"820\" height=\"441\" class=\"aligncenter size-full wp-image-8573\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-1.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-1-300x160.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<h3>1.2 HTML Setup<\/h3>\n<p>As you might already know, Bootstrap basic syntax, which links all necessary files and libraries together is:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n    &lt;title&gt;Bootstrap Tables Example&lt;\/title&gt;\r\n\r\n    &lt;!-- Bootstrap --&gt;\r\n    &lt;link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n\r\n    &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;\r\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;\r\n    &lt;script src=\"js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h2>2. Basic Example<\/h2>\n<p>For basic styling\u2014light padding and only horizontal dividers we add the base class <code>.table<\/code> to any <code>&lt;table&gt;<\/code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, it&#8217;s opted to isolate Bootstrap&#8217;s custom table styles. The basic markup would look like this:<\/p>\n<pre class=\"brush:xml\">\r\n  &lt;table class=\"table\"&gt;\r\n    ...\r\n  &lt;\/table&gt;\r\n<\/pre>\n<p>For this first example, let&#8217;s fill the table with information to make it feel more practical to you:<\/p>\n<pre class=\"brush:xml\">\r\n  &lt;table class=\"table\"&gt;\r\n  &lt;thead&gt;\r\n  &lt;tr&gt;\r\n    &lt;th&gt;#&lt;\/th&gt;\r\n    &lt;th&gt;Name&lt;\/th&gt;\r\n    &lt;th&gt;Age&lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;\/thead&gt;\r\n  &lt;tbody&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;1&lt;\/td&gt;\r\n    &lt;td&gt;Fabio&lt;\/td&gt;\r\n    &lt;td&gt;22&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n    &lt;td&gt;2&lt;\/td&gt;\r\n    &lt;td&gt;Jason&lt;\/td&gt;\r\n    &lt;td&gt;16&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n    &lt;td&gt;3&lt;\/td&gt;\r\n    &lt;td&gt;Rahela&lt;\/td&gt;\r\n    &lt;td&gt;25&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;\/tbody&gt;\r\n  &lt;\/table&gt;\r\n<\/pre>\n<p>The result in the browser would be:<br \/>\n<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-2.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-2.jpg\" alt=\"tables-2\" width=\"820\" height=\"231\" class=\"aligncenter size-full wp-image-8594\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-2.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-2-300x85.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><br \/>\nNotice that by default the table will display full page width (or container width), but here I&#8217;ve set a reduced body width for demonstration purposes.<\/p>\n<h2>3. Table Examples<\/h2>\n<p>The following section is a collection of other ways of styling tables rather than the default one.<\/p>\n<h3>3.1 Striped Rows<\/h3>\n<p>Use <code>.table-striped<\/code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;<\/code> like so:<\/p>\n<pre class=\"brush:xml\">\r\n   &lt;table class=\"table table-striped\"&gt;\r\n      ...\r\n   &lt;\/table&gt;\r\n<\/pre>\n<p>The content represented with &#8220;&#8230;&#8221; is and will be the same as the default example. The view in this case would be:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-3.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-3.jpg\" alt=\"tables-3\" width=\"820\" height=\"231\" class=\"aligncenter size-full wp-image-8596\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-3.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-3-300x85.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<h3>3.2 Bordered Table<\/h3>\n<p>Add <code>.table-bordered<\/code> for borders on all sides of the table and cells like so:<\/p>\n<pre class=\"brush:xml\">\r\n   &lt;table class=\"table table-bordered\"&gt;\r\n      ...\r\n   &lt;\/table&gt;\r\n<\/pre>\n<p>Now the table has borders on all sides and even between the cells:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-4.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-4.jpg\" alt=\"tables-4\" width=\"820\" height=\"231\" class=\"aligncenter size-full wp-image-8598\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-4.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-4-300x85.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<h3>3.3 Hover Rows<\/h3>\n<p>Add <code>.table-hover<\/code> to enable a hover state on table rows within a <code>&lt;tbody&gt;<\/code>.<\/p>\n<pre class=\"brush:xml\">\r\n   &lt;table class=\"table table-hover\"&gt;\r\n      ...\r\n   &lt;\/table&gt;\r\n<\/pre>\n<p>Now the table has borders on all sides and even between the cells:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-5.gif\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-5.gif\" alt=\"tables-5\" width=\"820\" height=\"228\" class=\"aligncenter size-full wp-image-8600\" \/><\/a><\/p>\n<h3>3.4 Condensed table<\/h3>\n<p>Add <code>.table-condensed<\/code> to make tables more compact by cutting cell padding in half.<\/p>\n<pre class=\"brush:xml\">\r\n   &lt;table class=\"table table-condensed\"&gt;\r\n      ...\r\n   &lt;\/table&gt;\r\n<\/pre>\n<p>The result would be a more compact table with minimal styling:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables6.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables6.jpg\" alt=\"tables6\" width=\"820\" height=\"173\" class=\"aligncenter size-full wp-image-8606\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables6.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables6-300x63.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<h3>3.5 Contextual Classes<\/h3>\n<p>Use contextual classes to color table rows or individual cells. The following graphic defines each of the classes you can use:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-7.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-7.jpg\" alt=\"tables-7\" width=\"820\" height=\"219\" class=\"aligncenter size-full wp-image-8610\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-7.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-7-300x80.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<p>For this example, let&#8217;s once again show the table information with these classes added in some cases to table rows and in other cases to specific table data:<\/p>\n<pre class=\"brush:xml\">\r\n  &lt;table class=\"table\"&gt;\r\n  &lt;thead&gt;\r\n  &lt;tr&gt;\r\n    &lt;th&gt;#&lt;\/th&gt;\r\n    &lt;th&gt;Name&lt;\/th&gt;\r\n    &lt;th&gt;Age&lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;\/thead&gt;\r\n  &lt;tbody&gt;\r\n  &lt;tr&gt;\r\n    &lt;td class=\"active\"&gt;1&lt;\/td&gt;\r\n    &lt;td&gt;Fabio&lt;\/td&gt;\r\n    &lt;td&gt;22&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr class=\"success\"&gt;\r\n    &lt;td&gt;2&lt;\/td&gt;\r\n    &lt;td&gt;Jason&lt;\/td&gt;\r\n    &lt;td&gt;16&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;3&lt;\/td&gt;\r\n    &lt;td&gt;Rahela&lt;\/td&gt;\r\n    &lt;td class=\"danger\"&gt;25&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr class=\"warning\"&gt;\r\n    &lt;td&gt;4&lt;\/td&gt;\r\n    &lt;td&gt;Jean&lt;\/td&gt;\r\n    &lt;td&gt;36&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;5&lt;\/td&gt;\r\n    &lt;td class=\"info\"&gt;Kristos&lt;\/td&gt;\r\n    &lt;td&gt;42&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;\/tbody&gt;\r\n  &lt;\/table&gt;\r\n<\/pre>\n<p>The result in the browser would be:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-8.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-8.jpg\" alt=\"tables-8\" width=\"820\" height=\"271\" class=\"aligncenter size-full wp-image-8613\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-8.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/tables-8-300x99.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<h2>4. Conclusion<\/h2>\n<p>Bootstrap has a simple but clean table design concept that will enhance your overall information organization. Just like every other element in Bootstrap, tables are also responsive. You can create responsive tables by wrapping any <code>.table<\/code> inside a <code>.table-responsive<\/code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.<\/p>\n<h2>5. Download<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/Bootstrap-Table.zip\"><strong>Bootstrap Tables<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The aim of this example is to show the various Bootstrap tables that you can use in your web projects. Unless you&#8217;ve been living under a rock, you already know what a table is. Tables are used to represent a set of data systematically displayed, especially in columns. That makes it easier for us to &hellip;<\/p>\n","protected":false},"author":75,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[],"class_list":["post-8524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap Table Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to show the various Bootstrap tables that you can use in your web projects. Unless you&#039;ve been living under a rock, you already\" \/>\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.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Table Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to show the various Bootstrap tables that you can use in your web projects. Unless you&#039;ve been living under a rock, you already\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-25T14:15:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T11:28:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"Bootstrap Table Example\",\"datePublished\":\"2015-11-25T14:15:42+00:00\",\"dateModified\":\"2018-01-08T11:28:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/\"},\"wordCount\":547,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/\",\"name\":\"Bootstrap Table Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2015-11-25T14:15:42+00:00\",\"dateModified\":\"2018-01-08T11:28:08+00:00\",\"description\":\"The aim of this example is to show the various Bootstrap tables that you can use in your web projects. Unless you've been living under a rock, you already\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Bootstrap Table Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Table Example - Web Code Geeks - 2026","description":"The aim of this example is to show the various Bootstrap tables that you can use in your web projects. Unless you've been living under a rock, you already","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.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Table Example - Web Code Geeks - 2026","og_description":"The aim of this example is to show the various Bootstrap tables that you can use in your web projects. Unless you've been living under a rock, you already","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-11-25T14:15:42+00:00","article_modified_time":"2018-01-08T11:28:08+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"Bootstrap Table Example","datePublished":"2015-11-25T14:15:42+00:00","dateModified":"2018-01-08T11:28:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/"},"wordCount":547,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/","name":"Bootstrap Table Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2015-11-25T14:15:42+00:00","dateModified":"2018-01-08T11:28:08+00:00","description":"The aim of this example is to show the various Bootstrap tables that you can use in your web projects. Unless you've been living under a rock, you already","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-table-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"Bootstrap","item":"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/"},{"@type":"ListItem","position":4,"name":"Bootstrap Table Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/8524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=8524"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/8524\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/8515"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=8524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=8524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=8524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}