Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction

→

Table Utilities in Bootstrap 5

Table Utilities: Additional utility classes to customize table appearance and behavior beyond basic table classes.

Table Alignment Utilities

Control text alignment within table cells using Bootstrap's text alignment utilities.

Horizontal Alignment

Left Aligned	Center Aligned	Right Aligned
Text aligned to left	Centered text	Right aligned text
Product names	Status badges	$99.99
Descriptions	Actions	Numbers, dates

Alignment Best Practices

Left align: Text, names, descriptions
Center align: Status indicators, actions
Right align: Numbers, currencies, dates
Consistency: Align similar data the same way
Headers: Match header alignment with data alignment

Code Example

<!-- Table alignment -->
            <table class="table">
            <thead>
                <tr>
                <th class="text-start">Left Header</th>
                <th class="text-center">Center Header</th>
                <th class="text-end">Right Header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td class="text-start">Left data</td>
                <td class="text-center">Center data</td>
                <td class="text-end">Right data</td>
                </tr>
            </tbody>
            </table>

Vertical Alignment

Vertical Cell Alignment

.align-top

Content aligned to top

.align-middle

Content vertically centered

.align-bottom

Content aligned to bottom

Use Cases

Align-top: Multiple lines of text
Align-middle: Icons with text, buttons
Align-bottom: Footer content, totals
Default: Bootstrap tables use top alignment

Practical Example

Product	Image	Description	Action
Laptop Pro		High-performance laptop with 16GB RAM, 512GB SSD, and 15-inch display. Perfect for professionals and gamers alike.

<!-- Vertical alignment in practice -->
            <table class="table">
            <tbody>
                <tr>
                <td class="align-middle">Text with image</td>
                <td class="align-middle">
                    <img src="product.jpg" alt="Product">
                </td>
                <td class="align-top">
                    Multi-line description aligned to top
                </td>
                <td class="align-middle">
                    <button class="btn btn-primary">
                    Action button
                    </button>
                </td>
                </tr>
            </tbody>
            </table>

Table Width Utilities

Column Width Control

25% Width	50% Width	25% Width
Quarter width column	Half width column	Quarter width column

Width Utility Classes

Class	Width	Use Case
`.w-25`	25%	Small columns, IDs, icons
`.w-50`	50%	Medium columns, names
`.w-75`	75%	Large columns, descriptions
`.w-100`	100%	Full width columns
`.w-auto`	Auto	Natural content width

Fixed Width Columns

Fixed 100px	Fixed 150px	Auto Width
ID column	Date column	Description column

<!-- Width control examples -->
            <table class="table">
            <thead>
                <tr>
                <!-- Percentage widths -->
                <th class="w-25">25% width</th>
                <th class="w-50">50% width</th>
                <th class="w-25">25% width</th>
                </tr>
                <tr>
                <!-- Fixed pixel widths -->
                <th style="width: 100px;">Fixed 100px</th>
                <th style="width: 150px;">Fixed 150px</th>
                <th class="w-auto">Auto width</th>
                </tr>
            </thead>
            </table>

Table Padding Utilities

Cell Padding Control

Padding	Class	Example
Extra Small	`.p-1`	Tight padding
Small	`.p-2`	Compact padding
Medium	`.p-3`	Default padding
Large	`.p-4`	Spacious padding
Extra Large	`.p-5`	Very spacious

Note: Table cells already have built-in padding. Use these utilities to override or adjust specific cells.

Directional Padding

Direction	Class	Example
Top Only	`.pt-3`	Top padding
Right Only	`.pe-3`	Right padding
Bottom Only	`.pb-3`	Bottom padding
Left Only	`.ps-3`	Left padding
Horizontal	`.px-3`	Left & right
Vertical	`.py-3`	Top & bottom

<!-- Directional padding in tables -->
            <table class="table">
            <tbody>
                <tr>
                <td class="pt-4">Extra top padding</td>
                <td class="pe-4">Extra right padding</td>
                <td class="pb-4">Extra bottom padding</td>
                <td class="ps-4">Extra left padding</td>
                </tr>
                <tr>
                <td class="px-4">Extra horizontal</td>
                <td class="py-4">Extra vertical</td>
                <td class="p-4">All directions</td>
                <td class="p-0">No padding</td>
                </tr>
            </tbody>
            </table>

Border Utilities for Tables

Custom Border Styling

Border Utility	Description	Example
`.border`	Adds border to all sides	Bordered cell
`.border-top`	Top border only	Top border
`.border-end`	Right border only	Right border
`.border-bottom`	Bottom border only	Bottom border
`.border-start`	Left border only	Left border
`.border-0`	Removes all borders	No borders
`.border-primary`	Primary color border	Colored border
`.border-2`	2px border width	Thicker border

Practical Border Example

Section 1	Section 2	Section 3
Column group 1	Column group 2	Column group 3
Total group 1	Total group 2	Total group 3

Border Color Variants

Primary

Success

Danger

Warning

Info

Dark

<!-- Border utilities in tables -->
            <table class="table">
            <tbody>
                <tr class="border-top border-3 border-primary">
                <td class="border-end border-2">Section divider</td>
                <td>Regular cell</td>
                </tr>
                <tr>
                <td class="border border-danger">Highlighted cell</td>
                <td class="border-start border-success">Success border</td>
                </tr>
            </tbody>
            </table>

Background Utilities for Tables

Cell Background Colors

Class	Description	Example
`.bg-primary`	Primary background	Primary
`.bg-success`	Success background	Success
`.bg-danger`	Danger background	Danger
`.bg-warning`	Warning background	Warning
`.bg-info`	Info background	Info
`.bg-light`	Light background	Light
`.bg-dark`	Dark background	Dark

Background with Opacity

Opacity	Class	Example
100%	`.bg-primary`	Full opacity
75%	`.bg-primary bg-opacity-75`	75% opacity
50%	`.bg-primary bg-opacity-50`	50% opacity
25%	`.bg-primary bg-opacity-25`	25% opacity
10%	`.bg-primary bg-opacity-10`	10% opacity

<!-- Background with opacity -->
            <table class="table">
            <tbody>
                <tr>
                <td class="bg-success bg-opacity-25">
                    Subtle success highlight
                </td>
                <td class="bg-warning bg-opacity-50">
                    Medium warning highlight
                </td>
                </tr>
                <tr>
                <td class="bg-danger bg-opacity-10">
                    Very subtle danger indicator
                </td>
                <td class="bg-info bg-opacity-75">
                    Strong info background
                </td>
                </tr>
            </tbody>
            </table>

Text Utilities for Tables

Text Styling in Tables

Utility	Class	Example
Font Weight	`.fw-bold`	Bold text
Font Weight	`.fw-semibold`	Semibold text
Font Weight	`.fw-normal`	Normal weight
Font Weight	`.fw-light`	Light text
Font Style	`.fst-italic`	Italic text
Font Style	`.fst-normal`	Normal style
Text Decoration	`.text-decoration-underline`	Underlined
Text Decoration	`.text-decoration-line-through`	Line through
Text Transform	`.text-uppercase`	Uppercase text
Text Transform	`.text-lowercase`	LOWERCASE TEXT
Text Transform	`.text-capitalize`	capitalized text

Practical Text Styling

Product	Status	Price	Discount
Laptop Pro	in stock	$1,299	$1,499
wireless mouse	low stock	$49	No discount

Code Example

<!-- Text utilities in tables -->
            <table class="table">
            <tbody>
                <tr>
                <td class="fw-bold text-uppercase">
                    Important header
                </td>
                <td class="fst-italic text-muted">
                    Additional note
                </td>
                </tr>
                <tr>
                <td class="text-decoration-line-through">
                    Old price
                </td>
                <td class="fw-bold text-success">
                    New price
                </td>
                </tr>
                <tr>
                <td class="text-capitalize">
                    product name
                </td>
                <td class="fw-light">
                    Light description
                </td>
                </tr>
            </tbody>
            </table>

Display Utilities for Tables

Show/Hide Table Elements

Display Class	Behavior	Example
`.d-none`	Hidden	This is hidden
`.d-table-cell`	Display as table cell	Table cell
`.d-md-table-cell`	Table cell on medium+	Visible md+
`.d-lg-none`	Hidden on large+	Hidden lg+

Tip: Use .d-none .d-md-table-cell to hide cells on mobile and show them on tablet and desktop.

Responsive Display Example

Product	Category	Supplier	Price	Stock	Action
Laptop Pro	Electronics	TechCorp	$1,299	15

<!-- Responsive display in tables -->
            <table class="table">
            <thead>
                <tr>
                <th>Always visible</th>
                <th class="d-none d-sm-table-cell">Visible sm+</th>
                <th class="d-none d-md-table-cell">Visible md+</th>
                <th class="d-none d-lg-table-cell">Visible lg+</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td>Data</td>
                <td class="d-none d-sm-table-cell">Sm+ data</td>
                <td class="d-none d-md-table-cell">Md+ data</td>
                <td class="d-none d-lg-table-cell">Lg+ data</td>
                </tr>
            </tbody>
            </table>

Combining Utilities

Complex Utility Combinations

ID	Product Details	Status	Financials
P-1001	Laptop Pro High-performance model	In Stock	$1,299 $1,499
P-1002	wireless mouse Ergonomic design	Low Stock	$49 Regular price

Utility Combination Strategy

Start with structure: Basic table with data
Add alignment: Use text and vertical alignment
Apply styling: Add colors, borders, backgrounds
Enhance typography: Use font weights, styles
Make responsive: Add display utilities
Test thoroughly: Check all screen sizes

Code Snippet

<!-- Complex utility combination -->
            <table class="table table-bordered">
            <tbody>
                <tr class="border-top border-3">
                <td class="text-center align-middle 
                            fw-bold border-end">
                    <!-- Multiple utilities -->
                </td>
                <td>
                    <div class="fw-bold text-uppercase">
                    Product name
                    </div>
                    <div class="text-muted fst-italic">
                    Description
                    </div>
                </td>
                <td class="text-center align-middle">
                    <span class="badge bg-success 
                                text-uppercase fw-bold 
                                px-3 py-2">
                    Status
                    </span>
                </td>
                <td class="text-end align-middle">
                    <div class="fw-bold fs-5">$99</div>
                    <div class="text-decoration-line-through 
                                text-muted">
                    Old price
                    </div>
                </td>
                </tr>
            </tbody>
            </table>

Performance Considerations

Utility Class Performance

CSS specificity: Utility classes have low specificity
File size: Unused utilities increase CSS size
Render performance: Many classes can slow rendering
Mobile performance: Test on actual mobile devices
Purge CSS: Remove unused utilities in production
Class ordering: Order doesn't affect performance
Browser rendering: Different browsers handle utilities differently

Best Practices

✅ Use utilities for one-off styling
✅ Create custom CSS for repeated patterns
✅ Limit the number of utility classes per element
✅ Use responsive utilities strategically
✅ Test performance with many table rows
✅ Consider CSS custom properties for theming
✅ Document complex utility combinations
✅ Use build tools to remove unused CSS

Summary and Best Practices

Table Utilities Guidelines

✅ Use alignment utilities for better data presentation
✅ Apply width utilities to control column proportions
✅ Use padding utilities for custom cell spacing
✅ Apply border utilities for visual separation
✅ Use background utilities for highlighting
✅ Apply text utilities for better typography
✅ Use display utilities for responsive behavior
✅ Combine utilities thoughtfully for complex designs

When to Use Utilities vs Custom CSS

Use utilities: One-off styling, prototypes, simple adjustments
Use custom CSS: Repeated patterns, complex designs, performance-critical sections
Hybrid approach: Use utilities for layout, custom CSS for complex styling
Maintenance: Utilities are easier to maintain for simple changes
Performance: Too many utilities can impact performance

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial