Why Small and compact tables in Bootsrap? - Purpose & Use Cases

The Big Idea

Discover how a tiny change in table style can make your webpage look cleaner and more professional instantly!

The Scenario

Imagine you have a webpage showing a list of products with prices and descriptions. You create a big table with lots of space between rows and columns to make it look neat.

The Problem

But the table takes up too much space, pushing important content down. Users have to scroll a lot, especially on small screens. Making the table smaller by hand means changing many styles and risking readability.

The Solution

Bootstrap's small and compact tables let you shrink the table's padding and spacing easily. This keeps the table readable but uses less space, making your page cleaner and easier to navigate.

Before vs After

✗ Before

<table>
  <tr><td>Product 1</td><td>$10</td></tr>
  <tr><td>Product 2</td><td>$20</td></tr>
</table>

✓ After

<table class="table table-sm">
  <tr><td>Product 1</td><td>$10</td></tr>
  <tr><td>Product 2</td><td>$20</td></tr>
</table>

What It Enables

You can create neat, space-saving tables that fit well on all devices without extra work.

Real Life Example

On a dashboard showing many stats, small tables let you display more data at once without overwhelming the user or cluttering the page.

Key Takeaways

Manual spacing in tables can waste space and hurt user experience.

Bootstrap's small tables reduce padding for compact, readable layouts.

This helps build cleaner, more user-friendly pages quickly.