# bootstrap-tables

**Repository Path**: mdbootstrap/bootstrap-tables

## Basic Information

- **Project Name**: bootstrap-tables
- **Description**: The ultimate collection of responsive Tables built with the latest Bootstrap 5. Free for personal & commercial use.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: https://mdbootstrap.com/docs/standard/data/tables/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-11
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Free Tables Collection
 
The ultimate collection of responsive **Tables** built with the latest Bootstrap 5.

<p><strong>How to use it?</strong></p>
<p class="mb-2">
<strong>1. </strong>Download<a target="_blank" href="https://mdbootstrap.com/docs/standard/"> MDB 5 - free UI KIT</a></p>
<p class="mb-2"><strong>2. </strong>Choose your favourite customized component and click on the image</p>
<p class="mb-3"><strong>3. </strong>Copy & paste the code into your MDB project</p>
              
--------------------
 
📄[Documentation & usage guide](https://mdbootstrap.com/docs/standard/data/tables/)

[▶️ Video tutorial](https://www.youtube.com/watch?v=9zHuZXMhMrA)
 
⚙️[Free generator](https://mdbootstrap.com/docs/standard/tools/builders/table/)
 
---------------------
 
These templates were built with a **free Material Design UI Kit for the latest Bootstrap 5**.
 
<img height="25" src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png">  [![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
 
---------------------


 <h2 class="mb-4">Table light with gradient background</h2>
 <a
     href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2919753?view=side" target="_blank">
     <picture>
        <source
            srcset=" https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img1.webp "
            type="image/webp" /> <img
            src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img1.jpg"
            class="w-100" alt="MDB 5 - Bootstrap 5 &amp; Material Design 2.0" /> </picture> </a>
 <hr class="my-5" />
 <h2 class="mb-4">Table dark with gradient background</h2>
 <a
     href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2919761?view=side" target="_blank"><picture>
        <source
            srcset=" https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img2.webp "
            type="image/webp" /> <img
            src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img2.jpg"
            class="w-100" alt="MDB 5 - Bootstrap 5 &amp; Material Design 2.0" /> </picture>  </a>
 <hr class="my-5" />
 <h2 class="mb-4">Table light with image background</h2>
  <a
     href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2920252?view=side" target="_blank"><picture>
        <source
            srcset=" https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img3.webp "
            type="image/webp" /> <img
            src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img3.jpg"
            class="w-100" alt="MDB 5 - Bootstrap 5 &amp; Material Design 2.0" /> </picture> </a>
 <hr class="my-5" />
 <h2 class="mb-4">Table dark with image background</h2>
  <a
     href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2919792?view=side" target="_blank"><picture>
        <source
            srcset=" https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img4.webp "
            type="image/webp" /> <img
            src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img4.jpg"
            class="w-100" alt="MDB 5 - Bootstrap 5 &amp; Material Design 2.0" /> </picture> </a>
 <hr class="my-5" />
 <h2 class="mb-4">Table with checkboxes and buttons</h2>
 <a
     href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2920555?view=side" target="_blank"> <picture>
        <source
            srcset=" https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img5.webp "
            type="image/webp" /> <img
            src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img5.jpg"
            class="w-100" alt="MDB 5 - Bootstrap 5 &amp; Material Design 2.0" /> </picture> </a>
 <hr class="my-5" />
 <h2 class="mb-4">Table translucent</h2>
 <a
     href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2920550?view=side" target="_blank"> <picture>
        <source
            srcset=" https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img6.webp "
            type="image/webp" /> <img
            src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img6.jpg"
            class="w-100" alt="MDB 5 - Bootstrap 5 &amp; Material Design 2.0" /> </picture> </a>
 <hr class="my-5" />
 <h2 class="mb-4">Table light with sticky header</h2>
 <a
     href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2920201?view=side" target="_blank"> <picture>
        <source
            srcset=" https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img7.webp "
            type="image/webp" /> <img
            src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img7.jpg"
            class="w-100" alt="MDB 5 - Bootstrap 5 &amp; Material Design 2.0" /> </picture> </a>
 <hr class="my-5" />
 <h2 class="mb-4">Table dark with sticky header</h2>
 <a
     href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2920214?view=side" target="_blank"><picture>
        <source
            srcset=" https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img8.webp "
            type="image/webp" /> <img
            src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img8.jpg"
            class="w-100" alt="MDB 5 - Bootstrap 5 &amp; Material Design 2.0" /> </picture>  </a>
 <hr class="my-5" />
 <h2 class="mb-4">Table with scrollbar</h2>
  <a
     href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2919695?view=side" target="_blank"><picture>
        <source
            srcset=" https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img9.webp "
            type="image/webp" /> <img
            src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img9.jpg"
            class="w-100" alt="MDB 5 - Bootstrap 5 &amp; Material Design 2.0" /> </picture> </a>
 <hr class="my-5" />
 <h2 class="mb-4">Table with fixed column</h2>
  <a
     href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2919513?view=side" target="_blank"><picture>
        <source
            srcset=" https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img10.webp "
            type="image/webp" /> <img
            src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/data/tables/examples/assets/img10.jpg"
            class="w-100" alt="MDB 5 - Bootstrap 5 &amp; Material Design 2.0" /> </picture> </a>
 <hr class="my-5" />