{"id":87709,"date":"2021-09-03T17:46:25","date_gmt":"2021-09-03T21:46:25","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=87709"},"modified":"2021-09-03T18:16:25","modified_gmt":"2021-09-03T22:16:25","slug":"using-bootstrap-5-tables","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/","title":{"rendered":"Using Bootstrap 5 in Joomla 4.0 &#8211; Tables"},"content":{"rendered":"<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables-1024x538.jpg\" alt=\"\" class=\"wp-image-87710\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables-1024x538.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables-300x158.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables-768x403.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables.jpg 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Tables are widely used in many types of widgets and plugins for CMS\u2019s like Joomla.\u00a0 Bootstrap tables provide a wide variety of control that you can apply to tables including their columns, rows, and cells. For the purpose of this article, we will show you the basic Bootstrap code that applies to the tables, rows, and columns.\u00a0 To see a complete list of all the features\/options please see the <a href=\"https:\/\/getbootstrap.com\/docs\/5.1\/content\/tables\/\">Bootstrap table code page<\/a>.<\/p>\n\n\n\n<p class=\"alert alert-warning\">What is Bootstrap?\u00a0 Bootstrap is an HTML, CSS, and JS framework used to build responsive websites that are designed to work with mobile devices.\u00a0 Bootstrap is currently in its 10th year of existence and in its 5th major release. It is part of an astonishing 22% of all websites on the internet.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#using\">Using the Basic Bootstrap Table Code<\/a><\/li><li><a href=\"#colors\">Using Colors with Bootstrap Tables<\/a><\/li><li><a href=\"#striped\">Using the Striped Bootstrap Tables<\/a><\/li><\/ul>\n\n\n<!-- Shortcode [joomla-vps-1] does not exist -->\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Using the Basic Bootstrap Table Code<\/h2>\n\n\n\n<p>Bootstrap table code starts with some basics that you can understand from using tables in HTML.\u00a0 In the example below, you can see how the table is initially defined, then you can see the header section and the body of the table including its content.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&lt;table class=\"table\"&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th scope=\"col\"&gt;#&lt;\/th&gt;\n      &lt;th scope=\"col\"&gt;First&lt;\/th&gt;\n      &lt;th scope=\"col\"&gt;Last&lt;\/th&gt;\n      &lt;th scope=\"col\"&gt;Role&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th scope=\"row\"&gt;1&lt;\/th&gt;\n      &lt;td&gt;John&lt;\/td&gt;\n      &lt;td&gt;Smith&lt;\/td&gt;\n      &lt;td&gt;Manager&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th scope=\"row\"&gt;2&lt;\/th&gt;\n      &lt;td&gt;David&lt;\/td&gt;\n      &lt;td&gt;Johns&lt;\/td&gt;\n      &lt;td&gt;Editor&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th scope=\"row\"&gt;3&lt;\/th&gt;\n      &lt;td&gt;Don&lt;\/td&gt;\n      &lt;td&gt;Knutz&lt;\/td&gt;\n      &lt;td&gt;User&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;\n<\/code><\/pre>\n\n\n\n<p>You can use this code and expand on it for your own tables and content.\u00a0 Follow the steps below to add the code in the Joomla editor.<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>Log in to the Joomla Administrator Dashboard.<\/li><li>Edit an existing article or create a new article.<\/li><li>Click on the <strong>Toggle<\/strong> button at the bottom of the editor. This places the editor in text\/code mode.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"479\" class=\"wp-image-87711\" style=\"width: 700px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-click-toggle-editor.jpg\" alt=\"select Toggle button in Joomla 4.0 editor\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-click-toggle-editor.jpg 1110w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-click-toggle-editor-300x205.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-click-toggle-editor-1024x701.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-click-toggle-editor-768x526.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br><\/li><li>Copy the code and add it to the text\/code editor.\u00a0<br><br><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"382\" class=\"wp-image-87712\" style=\"width: 700px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/basic-table-code-added-editor.jpg\" alt=\"basic table code added\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/basic-table-code-added-editor.jpg 1376w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/basic-table-code-added-editor-300x164.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/basic-table-code-added-editor-1024x559.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/basic-table-code-added-editor-768x419.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br><\/li><li>Once the has been added, click on the <strong>Toggle<\/strong> button once again and you can see how the table will appear in the visual mode of the editor.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"399\" class=\"wp-image-87713\" style=\"width: 700px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/basic-table-appearance-visual-editor.jpg\" alt=\"Basic table - visual editor\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/basic-table-appearance-visual-editor.jpg 1377w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/basic-table-appearance-visual-editor-300x171.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/basic-table-appearance-visual-editor-1024x584.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/basic-table-appearance-visual-editor-768x438.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br><\/li><li>Click on <strong>SAVE<\/strong> or <strong>SAVE AND CLOSE<\/strong> in the top left of the editor to save your changes.<\/li><\/ol>\n\n\n\n<p><br>You can now see the basic table added in the editor.\u00a0 To help make it more visually appealing or easier to view when you have a lot of table data, you add colors and stripes.\u00a0\u00a0<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Using Colors with Bootstrap Tables<\/h2>\n\n\n\n<p>The colors used in Bootstrap are divided into 8 classes.\u00a0 You can see them listed below.\u00a0 When you use it with the Table class, then the color applies to the entire table.\u00a0 When you apply it to a row, then only that row is affected.\u00a0 If you apply it to a column or cell(s), then it is also the only element(s) affected.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- On tables --&gt;\n&lt;table class=\"table-primary\"&gt;...&lt;\/table&gt;\n&lt;table class=\"table-secondary\"&gt;...&lt;\/table&gt;\n&lt;table class=\"table-success\"&gt;...&lt;\/table&gt;\n&lt;table class=\"table-danger\"&gt;...&lt;\/table&gt;\n&lt;table class=\"table-warning\"&gt;...&lt;\/table&gt;\n&lt;table class=\"table-info\"&gt;...&lt;\/table&gt;\n&lt;table class=\"table-light\"&gt;...&lt;\/table&gt;\n&lt;table class=\"table-dark\"&gt;...&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>Note that when you apply the color to the entire table, then you need to be careful in how you apply the code.\u00a0 Although the code provided by Bootstrap\u2019s documentation shows \u201cclass=table-primary\u201d for example, you actually need to add it after the initial class definition of the code.\u00a0 So, it will appear like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/whole-table-color-added.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"571\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/whole-table-color-added-1024x571.jpg\" alt=\"\" class=\"wp-image-87715\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/whole-table-color-added-1024x571.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/whole-table-color-added-300x167.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/whole-table-color-added-768x428.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/whole-table-color-added.jpg 1385w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a><\/figure>\n\n\n\n<p><br>The class definition is set to \u201ctable table-primary\u201d.\u00a0 Presently, you can not see the applied color when you toggle the editor to visual mode.\u00a0 However, you can see the color when you preview the article.\u00a0 Here\u2019s how the code above would appear:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"434\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-preview-whole-table-colored-1024x434.jpg\" alt=\"Color class added to the entire table\" class=\"wp-image-87716\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-preview-whole-table-colored-1024x434.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-preview-whole-table-colored-300x127.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-preview-whole-table-colored-768x326.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-preview-whole-table-colored.jpg 1073w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The code for applying color to rows, columns, or cells is as follows.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- On rows --&gt;\n&lt;tr class=\"table-primary\"&gt;...&lt;\/tr&gt;\n&lt;tr class=\"table-secondary\"&gt;...&lt;\/tr&gt;\n&lt;tr class=\"table-success\"&gt;...&lt;\/tr&gt;\n&lt;tr class=\"table-danger\"&gt;...&lt;\/tr&gt;\n&lt;tr class=\"table-warning\"&gt;...&lt;\/tr&gt;\n&lt;tr class=\"table-info\"&gt;...&lt;\/tr&gt;\n&lt;tr class=\"table-light\"&gt;...&lt;\/tr&gt;\n&lt;tr class=\"table-dark\"&gt;...&lt;\/tr&gt;\n\n&lt;!-- On cells (`td` or `th`) --&gt;\n&lt;tr&gt;\n  &lt;td class=\"table-primary\"&gt;...&lt;\/td&gt;\n  &lt;td class=\"table-secondary\"&gt;...&lt;\/td&gt;\n  &lt;td class=\"table-success\"&gt;...&lt;\/td&gt;\n  &lt;td class=\"table-danger\"&gt;...&lt;\/td&gt;\n  &lt;td class=\"table-warning\"&gt;...&lt;\/td&gt;\n  &lt;td class=\"table-info\"&gt;...&lt;\/td&gt;\n  &lt;td class=\"table-light\"&gt;...&lt;\/td&gt;\n  &lt;td class=\"table-dark\"&gt;...&lt;\/td&gt;\n&lt;\/tr&gt;<\/code><\/pre>\n\n\n\n<p>Note that adding a color to an entire column would mean applying the same code to all &lt;td&gt; entries in the same column in the table code. An example of how the color would appear for a row or cell would look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/color-applied-row-column-cell.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1016\" height=\"456\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/color-applied-row-column-cell.jpg\" alt=\"Example of the color applied to a row or cell\" class=\"wp-image-87718\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/color-applied-row-column-cell.jpg 1016w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/color-applied-row-column-cell-300x135.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/color-applied-row-column-cell-768x345.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"striped\">Using Striped Bootstrap Tables<\/h2>\n\n\n\n<p>The use of stripes on tables makes it easier to read data from left to right.\u00a0 This is especially helpful when you are displaying a lot of rows.\u00a0 The code as it applies to the entire table is shown below in addition to an example of its appearance:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-striped\"&gt;\n...\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>Example of the striped table code:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-striped.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1009\" height=\"448\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-striped.jpg\" alt=\"Example of a table with the striped code\" class=\"wp-image-87719\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-striped.jpg 1009w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-striped-300x133.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/table-striped-768x341.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Striped Table Variants<\/h3>\n\n\n\n<p>Dark stripes<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-dark table-striped\"&gt;\n...\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1009\" height=\"459\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/dark-stripes-table.jpg\" alt=\"dark stripes applied to table\" class=\"wp-image-87720\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/dark-stripes-table.jpg 1009w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/dark-stripes-table-300x136.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/dark-stripes-table-768x349.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Colored Stripes<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table table-success table-striped\"&gt;\n...\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>Example of colored stripes added to table:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1007\" height=\"461\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/color-striped.jpg\" alt=\"Example of table code with colored stripes\" class=\"wp-image-87721\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/color-striped.jpg 1007w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/color-striped-300x137.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/color-striped-768x352.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>As you can see, there are a number of variants you can use to make it easier for your data to be displayed in a table using Boostrap.\u00a0 Stripes work really well in making data readable when you are trying to read rows that are close together.<\/p>\n\n\n\n<p>Congratulations! You now know how to apply the Bootstrap table code to tables within a Joomla! 4.0 article!\u00a0\u00a0<\/p>\n\n\n\n<p>To learn more about using Joomla!, please see our <a href=\"https:\/\/www.inmotionhosting.com\/support\/\">InMotion Hosting Support Center<\/a> website!<\/p>\n\n\n<div class=\"jumbotron\">Discover how InMotion Hosting's virtual private servers can deliver power and performance for your Joomla site with our reliable <a href=\"https:\/\/www.inmotionhosting.com\/joomla-hosting\">Joomla Hosting<\/a> plans.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tables are widely used in many types of widgets and plugins for CMS\u2019s like Joomla.\u00a0 Bootstrap tables provide a wide variety of control that you can apply to tables including their columns, rows, and cells. For the purpose of this article, we will show you the basic Bootstrap code that applies to the tables, rows,<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/\"> Read More ><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4496],"tags":[],"class_list":["post-87709","post","type-post","status-publish","format-standard","hentry","category-joomla-4"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using Bootstrap 5 in Joomla 4.0 - Tables | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Learn how to use Bootstrap 5 code in Joomla 4.0 to add tables. You&#039;ll see how to add basic table code, then add stripes, and colors\" \/>\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.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Bootstrap 5 in Joomla 4.0 - Tables\" \/>\n<meta property=\"og:description\" content=\"Learn how to use Bootstrap 5 code in Joomla 4.0 to add tables.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-03T21:46:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-03T22:16:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\"},\"headline\":\"Using Bootstrap 5 in Joomla 4.0 &#8211; Tables\",\"datePublished\":\"2021-09-03T21:46:25+00:00\",\"dateModified\":\"2021-09-03T22:16:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/\"},\"wordCount\":759,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables-1024x538.jpg\",\"articleSection\":[\"Joomla 4\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/\",\"name\":\"Using Bootstrap 5 in Joomla 4.0 - Tables | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables-1024x538.jpg\",\"datePublished\":\"2021-09-03T21:46:25+00:00\",\"dateModified\":\"2021-09-03T22:16:25+00:00\",\"description\":\"Learn how to use Bootstrap 5 code in Joomla 4.0 to add tables. You'll see how to add basic table code, then add stripes, and colors\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Using Bootstrap Table Code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Bootstrap 5 in Joomla 4.0 &#8211; Tables\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Bootstrap 5 in Joomla 4.0 - Tables | InMotion Hosting","description":"Learn how to use Bootstrap 5 code in Joomla 4.0 to add tables. You'll see how to add basic table code, then add stripes, and colors","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.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/","og_locale":"en_US","og_type":"article","og_title":"Using Bootstrap 5 in Joomla 4.0 - Tables","og_description":"Learn how to use Bootstrap 5 code in Joomla 4.0 to add tables.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2021-09-03T21:46:25+00:00","article_modified_time":"2021-09-03T22:16:25+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables.jpg","type":"image\/jpeg"}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b"},"headline":"Using Bootstrap 5 in Joomla 4.0 &#8211; Tables","datePublished":"2021-09-03T21:46:25+00:00","dateModified":"2021-09-03T22:16:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/"},"wordCount":759,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables-1024x538.jpg","articleSection":["Joomla 4"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/","name":"Using Bootstrap 5 in Joomla 4.0 - Tables | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables-1024x538.jpg","datePublished":"2021-09-03T21:46:25+00:00","dateModified":"2021-09-03T22:16:25+00:00","description":"Learn how to use Bootstrap 5 code in Joomla 4.0 to add tables. You'll see how to add basic table code, then add stripes, and colors","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-tables.jpg","width":1200,"height":630,"caption":"Using Bootstrap Table Code"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/using-bootstrap-5-tables\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Using Bootstrap 5 in Joomla 4.0 &#8211; Tables"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4496,"name":"Joomla 4","slug":"joomla-4","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=87709"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87709\/revisions"}],"predecessor-version":[{"id":87729,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87709\/revisions\/87729"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=87709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=87709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=87709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}