YouTip` element, as shown in the following example:
Example
Try it »
The result is as follows:
Panel Heading
We can add a panel heading in two ways:
Using the `.panel-heading` class makes it easy to add a heading container to a panel.
Using ``-`
This is a basic panel
`-`` with the `.panel-title` class adds a heading with predefined styles.
The following example demonstrates both methods:
Example
Panel heading without title
Panel content
Panel title
Panel content
Try it »
The result is as follows:
Panel Footer
We can add a footer to a panel by placing buttons or secondary text in a `` with the class `.panel-footer`. The following example demonstrates this:
Example
This is a basic panel
Try it »
The result is as follows:
Note: Panel footers do not inherit colors and borders from contextual panels because they are not in the foreground content.
Contextual Panels
Use the contextual state classes `panel-primary`, `panel-success`, `panel-info`, `panel-warning`, `panel-danger` to set panels with contextual colors, as shown in the following example:
Example
Panel title
This is a basic panel
Panel title
This is a basic panel
Panel title
This is a basic panel
Panel title
This is a basic panel
Panel title
This is a basic panel
Try it »
The result is as follows:
Panels with Tables
To create a borderless table within a panel, we can use the class `.table` inside the panel. Assuming there is a `` containing `.panel-body`, we can add extra top border to the table for separation. If there is no `` containing `.panel-body`, the component will move seamlessly from the panel heading to the table.
The following example demonstrates this:
Example
Panel title
This is a basic panel
Product Price
Product A 200 Product B 400
Panel title
Product Price
Product A 200 Product B 400
Try it »
The result is as follows:
Panels with List Groups
We can include list groups in any panel by creating a panel with the `.panel` and `.panel-default` classes on a `` element and adding a list group inside the panel. You can learn how to create list groups from the List Groups chapter.
Example
Panel title
This is a basic panel content. This is a basic panel content.
This is a basic panel content. This is a basic panel content.
This is a basic panel content. This is a basic panel content.
This is a basic panel content. This is a basic panel content.
- Free domain registration
- Free Window space hosting
- Number of images
- 24*7 support
- Annual update cost
Try it »
The result is as follows:
Bootstrap List Groups
Bootstrap Wells
ByteArk Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax. Official supply, stable and reliable.
Configuration Guide
¥9.9
/ month
Subscribe Now
iFlytek Spark Coding Plan
Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax. One-stop experience and deployment platform.
Configuration Guide
¥3.9
/ month
Subscribe 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 Construction
Advertisement
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 Elements
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 Create a Website
Bootstrap Plugins
Bootstrap Plugin Overview
Bootstrap Transitions
Bootstrap Modal
Bootstrap Dropdown
Bootstrap Scrollspy
Bootstrap Tabs
Bootstrap Tooltips
Bootstrap Popovers
Bootstrap Alert
Bootstrap Buttons
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 Technologies
· Computer Vision AI
· Deep Learning Basics
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Mark Article
Browsing History
Clear All
No records yet
Panel heading without title
Panel content
Panel title
Panel content
` with the class `.panel-footer`. The following example demonstrates this:
Example
Try it »
The result is as follows:
Note: Panel footers do not inherit colors and borders from contextual panels because they are not in the foreground content.
Contextual Panels
Use the contextual state classes `panel-primary`, `panel-success`, `panel-info`, `panel-warning`, `panel-danger` to set panels with contextual colors, as shown in the following example:
Example
Try it »
The result is as follows:
Panels with Tables
To create a borderless table within a panel, we can use the class `.table` inside the panel. Assuming there is a `
This is a basic panel
Panel title
This is a basic panel
Panel title
This is a basic panel
Panel title
This is a basic panel
Panel title
This is a basic panel
Panel title
This is a basic panel
` containing `.panel-body`, we can add extra top border to the table for separation. If there is no `
` containing `.panel-body`, the component will move seamlessly from the panel heading to the table.
The following example demonstrates this:
Example
Try it »
The result is as follows:
Panels with List Groups
We can include list groups in any panel by creating a panel with the `.panel` and `.panel-default` classes on a `
Panel title
This is a basic panel
| Product | Price |
|---|---|
| Product A | 200 |
| Product B | 400 |
Panel title
| Product | Price |
|---|---|
| Product A | 200 |
| Product B | 400 |
` element and adding a list group inside the panel. You can learn how to create list groups from the List Groups chapter.
Example
Try it »
The result is as follows:
Bootstrap List Groups
Bootstrap Wells
ByteArk Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax. Official supply, stable and reliable.
Configuration Guide
¥9.9
/ month
Subscribe Now
iFlytek Spark Coding Plan
Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax. One-stop experience and deployment platform.
Configuration Guide
¥3.9
/ month
Subscribe 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 Construction
Advertisement
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 Elements
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 Create a Website
Bootstrap Plugins
Bootstrap Plugin Overview
Bootstrap Transitions
Bootstrap Modal
Bootstrap Dropdown
Bootstrap Scrollspy
Bootstrap Tabs
Bootstrap Tooltips
Bootstrap Popovers
Bootstrap Alert
Bootstrap Buttons
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 Technologies
· Computer Vision AI
· Deep Learning Basics
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Mark Article
Browsing History
Clear All
No records yet
Panel title
This is a basic panel content. This is a basic panel content. This is a basic panel content. This is a basic panel content. This is a basic panel content. This is a basic panel content. This is a basic panel content. This is a basic panel content.
- Free domain registration
- Free Window space hosting
- Number of images
- 24*7 support
- Annual update cost