Nodeschool Public Materials

    @mdbootstrap/bootstrap-table-responsive

    1.0.0 • Public • Published

    Responsive table built with the latest Bootstrap 5. Responsive tables allow you to aggregate a huge amount of data and present it in a clear and orderly way.

    Check out Bootstrap Table responsive Documentation for detailed instructions & even more examples.

    Basic example

    Bootstrap 5 Table responsive

    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
        </tbody>
      </table>
    </div>

    How to use?

    1. Download MDB 5 - free UI KIT

    2. Choose your favourite customized component and click on the image

    3. Copy & paste the code into your MDB project

    ▶️ Subscribe to YouTube channel for web development tutorials & resources

    More examples

    Breakpoint specific:

    Bootstrap 5 Table responsive #1

    Scroll

    Bootstrap 5 Table responsive #2

    Fixed header

    Bootstrap 5 Table responsive #3

    You can find other examples here.


    More extended Bootstrap documentation

    Install

    npm i @mdbootstrap/bootstrap-table-responsive

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    5.98 MB

    Total Files

    352

    Last publish

    Collaborators

    • mdbootstrap