Bootstrap 5 Tutorial

Bootstrap 5 Tables

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="0b8c59da-79cb-4f7e-99cb-e6ca91b2978a" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Tables</h3>
<p>Bootstrap 5 offers a robust set of table styles that enhance the default HTML tables, making them responsive and visually appealing. With various utility classes, you can easily customize the appearance of your tables to fit your design needs.</p>
<hr />
<h3>Key Features of Bootstrap 5 Tables</h3>
<ol>
<li><strong>Basic Table Styles</strong>: Quickly add basic styles to tables using built-in classes.</li>
<li><strong>Responsive Tables</strong>: Tables can be made responsive, allowing them to scroll horizontally on smaller screens.</li>
<li><strong>Striped Rows</strong>: Use striped rows for better readability.</li>
<li><strong>Hover Effects</strong>: Add hover effects to highlight rows on mouse over.</li>
<li><strong>Bordered and Hoverable</strong>: Options to add borders and hover effects for better interaction.</li>
<li><strong>Contextual Classes</strong>: Easily color rows or cells based on the context (success, danger, warning, etc.).</li>
</ol>
<hr />
<h3>Example: Using Tables in Bootstrap 5</h3>
<p>Here&rsquo;s a simple example demonstrating different types of tables in Bootstrap 5:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 5 Tables&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 5 Tables&lt;/h1&gt;

&lt;h2&gt;Basic Table&lt;/h2&gt;
        &lt;table class="table"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;#&lt;/th&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Age&lt;/th&gt;
                    &lt;th&gt;City&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;John Doe&lt;/td&gt;
                    &lt;td&gt;30&lt;/td&gt;
                    &lt;td&gt;New York&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;Jane Smith&lt;/td&gt;
                    &lt;td&gt;25&lt;/td&gt;
                    &lt;td&gt;Los Angeles&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;3&lt;/td&gt;
                    &lt;td&gt;Michael Johnson&lt;/td&gt;
                    &lt;td&gt;40&lt;/td&gt;
                    &lt;td&gt;Chicago&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;

&lt;h2 class="mt-4"&gt;Striped Table&lt;/h2&gt;
        &lt;table class="table table-striped"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;#&lt;/th&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Age&lt;/th&gt;
                    &lt;th&gt;City&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;Emily Davis&lt;/td&gt;
                    &lt;td&gt;28&lt;/td&gt;
                    &lt;td&gt;Miami&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;Chris Brown&lt;/td&gt;
                    &lt;td&gt;35&lt;/td&gt;
                    &lt;td&gt;Houston&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;3&lt;/td&gt;
                    &lt;td&gt;Linda Wilson&lt;/td&gt;
                    &lt;td&gt;22&lt;/td&gt;
                    &lt;td&gt;Seattle&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;

&lt;h2 class="mt-4"&gt;Hoverable Table&lt;/h2&gt;
        &lt;table class="table table-hover"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;#&lt;/th&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Age&lt;/th&gt;
                    &lt;th&gt;City&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;Mark Thompson&lt;/td&gt;
                    &lt;td&gt;29&lt;/td&gt;
                    &lt;td&gt;San Francisco&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;Sarah Lee&lt;/td&gt;
                    &lt;td&gt;32&lt;/td&gt;
                    &lt;td&gt;Boston&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;3&lt;/td&gt;
                    &lt;td&gt;Kevin White&lt;/td&gt;
                    &lt;td&gt;27&lt;/td&gt;
                    &lt;td&gt;Denver&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;

&lt;h2 class="mt-4"&gt;Responsive Table&lt;/h2&gt;
        &lt;div class="table-responsive"&gt;
            &lt;table class="table"&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th&gt;#&lt;/th&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                        &lt;th&gt;Age&lt;/th&gt;
                        &lt;th&gt;City&lt;/th&gt;
                        &lt;th&gt;Occupation&lt;/th&gt;
                        &lt;th&gt;Country&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                    &lt;tr&gt;
                        &lt;td&gt;1&lt;/td&gt;
                        &lt;td&gt;Anna Bell&lt;/td&gt;
                        &lt;td&gt;31&lt;/td&gt;
                        &lt;td&gt;Atlanta&lt;/td&gt;
                        &lt;td&gt;Designer&lt;/td&gt;
                        &lt;td&gt;USA&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;2&lt;/td&gt;
                        &lt;td&gt;David Green&lt;/td&gt;
                        &lt;td&gt;37&lt;/td&gt;
                        &lt;td&gt;Orlando&lt;/td&gt;
                        &lt;td&gt;Engineer&lt;/td&gt;
                        &lt;td&gt;USA&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;3&lt;/td&gt;
                        &lt;td&gt;Alice Brown&lt;/td&gt;
                        &lt;td&gt;26&lt;/td&gt;
                        &lt;td&gt;Dallas&lt;/td&gt;
                        &lt;td&gt;Teacher&lt;/td&gt;
                        &lt;td&gt;USA&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Basic Table</strong>: Demonstrates a simple Bootstrap table with a header and rows.</li>
<li><strong>Striped Table</strong>: Adds a striped effect for improved readability using the <code>table-striped</code> class.</li>
<li><strong>Hoverable Table</strong>: Highlights rows on hover using the <code>table-hover</code> class.</li>
<li><strong>Responsive Table</strong>: Encapsulated in a <code>&lt;div&gt;</code> with the <code>table-responsive</code> class, allowing horizontal scrolling on smaller screens.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More