Bootstrap Make Table Compact

Bootstrap is a widely used front-end development framework that provides high-quality pre-built components like forms, buttons, tables, and more. Bootstrap tables are a great way to display data in a structured way, but sometimes they can take up too much space. This is where making tables compact can help. In this article, we'll discuss how to make Bootstrap tables compact and provide some examples.

The Bootstrap Table Class

Bootstrap provides various classes to style tables. By default, tables are styled with the .table class. This class adds padding and horizontal borders to each cell.

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

The Bootstrap Table-Sm Class

Bootstrap provides a class to make tables smaller. The .table-sm class removes some of the padding and reduces the font size.

<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

The Bootstrap Table-Striped Class

Bootstrap provides a class to add zebra-striping to tables. The .table-striped class adds a light background color to every other row.

<table class="table table-sm table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

The Bootstrap Table-Dark Class

Bootstrap provides a class to add dark styling to tables. The .table-dark class adds a dark background color to the table header and rows.

<table class="table table-sm table-striped table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

Conclusion

Making Bootstrap tables compact can be accomplished in various ways. Using the .table-sm class, removing padding, adding zebra-striping, or adding dark styling are all effective ways to make tables more compact. By using these techniques, you can create clean, structured tables that save space on your webpage without sacrificing readability.