Bootstrap Tables and Lists

25 min

Bootstrap provides comprehensive table styling that makes data presentation clean and readable. Tables can be enhanced with various modifier classes including `.table-striped` for alternating row colors, `.table-bordered` for visible borders, `.table-hover` for row highlighting on hover, and `.table-dark` for dark-themed tables. These modifiers can be combined to create the exact table appearance you need.

Responsive tables are essential for mobile-friendly designs. The `.table-responsive` wrapper creates a horizontally scrollable table on smaller screens, preventing layout breaking. You can specify breakpoints (`.table-responsive-sm`, `.table-responsive-md`, etc.) to control when scrolling activates. This ensures tables remain usable across all device sizes.

Table variants include contextual row and cell coloring using classes like `.table-primary`, `.table-success`, or `.table-danger`. These classes can be applied to `<tr>` or `<td>` elements to highlight specific rows or cells. This is useful for status indicators, priority levels, or categorization.

Bootstrap's list components provide styled alternatives to default HTML lists. List groups (`.list-group`) create container lists with proper spacing and borders. List group items (`.list-group-item`) can be interactive, include badges, and support various states (active, disabled). List groups are perfect for navigation menus, feature lists, or content organization.

List groups support various content types including text, headings, badges, and even custom HTML. Items can be links or buttons for interactive lists. Badges can be added to list items to display counts, labels, or status indicators. The flexible structure makes list groups suitable for many use cases.

Bootstrap also provides unstyled lists (`.list-unstyled`) that remove default list styling, and inline lists (`.list-inline`) for horizontal list layouts. These utilities provide additional flexibility when standard list styling doesn't fit your design needs.

Key Concepts

Tables support modifiers: striped, bordered, hoverable, dark variants.
Table-responsive creates horizontally scrollable tables on mobile.
Contextual table classes color rows or cells by meaning.
List groups provide styled, interactive list containers.
List groups support badges, states, and various content types.

Learning Objectives

Master

Creating styled tables with various modifiers
Making tables responsive for mobile devices
Using list groups for organized content display
Applying contextual colors to table rows and cells

Develop

Designing effective data presentation
Understanding responsive table patterns
Creating organized content structures

Tips

Wrap tables in .table-responsive for mobile scrolling.
Combine table modifiers: table table-striped table-hover.
Use .table-dark for dark-themed tables or table sections.
Make list items interactive: <a href="#" class="list-group-item list-group-item-action">.

Common Pitfalls

Not using table-responsive, causing horizontal scrolling on mobile.
Forgetting table class on <table> element, missing Bootstrap styling.
Not using proper table structure (thead, tbody), breaking styling.
Overcomplicating list groups when simple lists would suffice.

Summary

Bootstrap provides comprehensive table and list styling.
Tables support various modifiers and responsive behavior.
List groups enable styled, interactive list displays.
Contextual colors enhance data presentation.

Exercise

Create a responsive table with different styles and a styled list.

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Exercise Tips

Try table variants: table-striped, table-bordered, table-hover combinations.
Add contextual rows: <tr class="table-success"> for colored rows.
Use list-group with badges: <span class="badge bg-primary">New</span>.
Create interactive lists: <a href="#" class="list-group-item list-group-item-action">.

Bootstrap Tables and Lists