-- Learning is not just about technology, but also about dreams!
Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks
Bootstrap Tutorial
Bootstrap Tutorial
Bootstrap Introduction
Bootstrap Environment Setup
Bootstrap CSS
Bootstrap CSS Overview
Bootstrap Grid System
Bootstrap Typography
Bootstrap Code
Bootstrap Tables
Bootstrap Forms
Bootstrap Buttons
Bootstrap Images
Bootstrap Helper Classes
Bootstrap Responsive Utilities
Bootstrap Layout Components
Bootstrap Glyphicons
Bootstrap Dropdowns
Bootstrap Button Groups
Bootstrap Button Dropdowns
Bootstrap Input Groups
Bootstrap Navigation
Bootstrap Navbar
Bootstrap Breadcrumbs
Bootstrap Pagination
Bootstrap Labels
Bootstrap Badges
Bootstrap Jumbotron
Bootstrap Page Header
Bootstrap Thumbnails
Bootstrap Alerts
Bootstrap Progress Bars
Bootstrap Media Objects
Bootstrap List Groups
Bootstrap Panels
Bootstrap Wells
Bootstrap Creating a Web Page
Bootstrap Plugins
Bootstrap Plugin Overview
Bootstrap Transitions
Bootstrap Modal
Bootstrap Dropdown
Bootstrap Scrollspy
Bootstrap Tab
Bootstrap Tooltip
Bootstrap Popover
Bootstrap Alert
Bootstrap Button
Bootstrap Collapse
Bootstrap Carousel
Bootstrap Affix
Bootstrap Other
Bootstrap UI Editor
Bootstrap v2 Tutorial
Bootstrap HTML Coding Standards
Bootstrap CSS Coding Standards
Bootstrap Visual Layout
Less Tutorial
Bootstrap Code
Bootstrap Forms
Bootstrap Tables
Bootstrap provides a clean layout for creating tables. The following table lists some of the table elements supported by Bootstrap:
Tag Description
Adds basic styling to the table.
Container element for table header rows (), used to identify table columns.
Container element for table body rows ().
Container element for a group of table cells (| or | ) that appear on a single row.
| Default table cell.
| Special table cell used to identify columns or rows (depending on scope and position). Must be used within .
A description or summary of the table's stored content.
Table Classes
The following table styles can be used on tables:
Class Description Example
.table Adds basic styling to any (horizontal dividers only)
Try it
.table-striped Adds zebra-striping to any table row within (Not supported in IE8)
Try it
.table-bordered Adds borders on all table cells and on the table as a whole
Try it
.table-hover Enables a hover state on table rows within
Try it
.table-condensed Makes tables more compact by cutting cell padding in half
Try it
Combine all table classes
Try it
, | and | Classes
The following classes can be used on table rows or cells:
Class Description Example
.active Applies the hover color to a particular row or cell
Try it
.success Indicates a successful or positive action
Try it
.info Indicates a neutral informative change or action
Try it
.warning Indicates a warning that might need attention
Try it
.danger Indicates a dangerous or potentially negative action
Try it
Basic Table
If you want a basic table with only padding and horizontal dividers, add the class .table, as shown in the example below:
Example
Basic Table Layout
| Name |
City |
| Tanmay |
Bangalore |
| Sachin |
Mumbai |
Try it »
The result looks like this:
Optional Table Classes
In addition to the basic table markup and the .table class, there are some classes that can be used to define styles for the markup. These classes are introduced below.
Striped Table
By adding the .table-striped class, you will see zebra striping on rows within the | , as shown in the example below:
Example
Striped Table Layout
| Name |
City |
Zip Code |
| Tanmay |
Bangalore |
560001 |
| Sachin |
Mumbai |
400003 |
| Uma |
Pune |
411027 |
Try it »
The result looks like this:
Bordered Table
By adding the .table-bordered class, you will see borders on each element around the table and the entire table is rounded, as shown in the example below:
Example
Bordered Table Layout
| Name |
City |
Zip Code |
| Tanmay |
Bangalore |
560001 |
| Sachin |
Mumbai |
400003 |
| Uma |
Pune |
411027 |
Try it »
The result looks like this:
Hover Table
By adding the .table-hover class, a light gray background will appear when the pointer hovers over a row, as shown in the example below:
Example
Hover Table Layout
| Name |
City |
Zip Code |
| Tanmay |
Bangalore |
560001 |
| Sachin |
Mumbai |
400003 |
| Uma |
Pune |
411027 |
Try it »
The result looks like this:
Condensed Table
By adding the .table-condensed class, row padding is cut in half to make the table look more compact, as shown in the example below. This is useful when you want the information to appear more condensed.
Example
Condensed Table Layout
| Name |
City |
Zip Code |
| Tanmay |
Bangalore |
560001 |
| Sachin |
Mumbai |
400003 |
| Uma |
Pune |
411027 |
Try it »
The result looks like this:
Contextual Classes
The contextual classes listed in the table below allow you to change the background color of table rows or individual cells.
Class Description
.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action
These classes can be applied to , | , or | .
Example
Contextual Table Layout
| Product |
Payment Date |
Status |
| Product 1 |
23/11/2013 |
Pending Shipment |
| Product 2 |
10/11/2013 |
Being Shipped |
| Product 3 |
20/10/2013 |
Pending Confirmation |
| Product 4 |
20/10/2013 |
Returned |
Try it »
The result looks like this:
Responsive Tables
By wrapping any .table in a .table-responsive div, you can make the table scroll horizontally on small devices (less than 768px). When viewing on larger devices (wider than 768px), you will not see any difference.
Example
Responsive Table Layout
| Product |
Payment Date |
Status |
| Product 1 |
23/11/2013 |
Pending Shipment |
| Product 2 |
10/11/2013 |
Being Shipped |
| Product 3 |
20/10/2013 |
Pending Confirmation |
| Product 4 |
20/10/2013 |
Returned |
Try it »
The result looks like this:
Bootstrap Code
Bootstrap Forms
ByteDance Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied, stable and reliable.
Configuration Guide
¥9.9
/ Month
Activate Now
iFlytek Xingchen Coding Plan
Includes free model call quotas, DeepSeek, GLM, Kimi, MiniMax, a one-stop experience and deployment platform.
Configuration Guide
¥3.9
/ Month
Activate Now
Click here to share notes
Category Navigation
Python / Data Science
AI / Intelligent Development
Front-end Development
Back-end Development
Database
Mobile Development
DevOps / Engineering
Programming Languages
Computer Fundamentals
XML / Web Service
.NET
Website Building
Advertisement
Deep Dive
Software
Web Services
Programming Languages
Scripting Languages
Web Design & Development
Computer Science
Programming
Web Service
Bootstrap Tutorial
Bootstrap Tutorial
Bootstrap Introduction
Bootstrap Environment Setup
Bootstrap CSS
Bootstrap CSS Overview
Bootstrap Grid System
Bootstrap Typography
Bootstrap Code
Bootstrap Tables
Bootstrap Forms
Bootstrap Buttons
Bootstrap Images
Bootstrap Helper Classes
Bootstrap Responsive Utilities
Bootstrap Layout Components
Bootstrap Glyphicons
Bootstrap Dropdowns
Bootstrap Button Groups
Bootstrap Button Dropdowns
Bootstrap Input Groups
Bootstrap Navigation
Bootstrap Navbar
Bootstrap Breadcrumbs
Bootstrap Pagination
Bootstrap Labels
Bootstrap Badges
Bootstrap Jumbotron
Bootstrap Page Header
Bootstrap Thumbnails
Bootstrap Alerts
Bootstrap Progress Bars
Bootstrap Media Objects
Bootstrap List Groups
Bootstrap Panels
Bootstrap Wells
Bootstrap Creating a Web Page
Bootstrap Plugins
Bootstrap Plugin Overview
Bootstrap Transitions
Bootstrap Modal
Bootstrap Dropdown
Bootstrap Scrollspy
Bootstrap Tab
Bootstrap Tooltip
Bootstrap Popover
Bootstrap Alert
Bootstrap Button
Bootstrap Collapse
Bootstrap Carousel
Bootstrap Affix
Bootstrap Other
Bootstrap UI Editor
Bootstrap v2 Tutorial
Bootstrap HTML Coding Standards
Bootstrap CSS Coding Standards
Bootstrap Visual Layout
Less Tutorial
Online Examples
·HTML Examples
·CSS Examples
·JavaScript Examples
·Ajax Examples
·jQuery Examples
·XML Examples
·Java Examples
Character Sets & Tools
· HTML Character Set Settings
· HTML ASCII Character Set
· JS Obfuscation/Encryption
· PNG/JPEG Image Compression
· HTML Color Picker
· JSON Formatter
· Random Number Generator
Latest Updates
· AI Agent
· AI Evaluation and Safety Research
· AI System Architecture
· Frontier Research Trends
· Advanced NLP Techniques
· Computer Vision AI
· Deep Learning Fundamentals
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Bookmark Article
Browsing History
Clear All
No records yet
| |
YouTip