YouTip` element.
The example is as follows:
View Online Example
The effect of the above example is as follows:
Panel Heading
We can add a panel heading in two ways:
Use the `.panel-heading` class to easily add a heading container to your panel.
Use `` - `
This is a Basic panel
` - `` elements with the `.panel-title` class to add a pre-styled heading.
The following example demonstrates two different implementations:
Panel heading without title
Panel content
Panel With title
Panel content
View Online Example
The effect of the above example is as follows:
Panel Footer
You can add a footer to a panel by simply adding a `.panel-footer` class to a `` element. Example:
This is a Basic panel
View Online Example
The effect of the above example is as follows:
Note that the panel footer does not inherit colors from contextual replacements because it is not in the preceding content.
Panels with Contextual Alternatives
You can use the `.panel-primary`, `.panel-success`, `.panel-info`, `.panel-warning`, and `.panel-danger` classes to create panels with contextual alternatives. 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
View Online Example
The effect of the above example is as follows:
Panels with Tables
We can use the `.table` class to add a borderless table inside a panel. Use the `.panel-body` class to define additional text content for the table. Example:
Panel title
This is a Basic panel
Product Price
Product A 200 Product B 400
Panel Heading
Product Price
Product A 200 Product B 400
View Online Example
The effect of the above example is as follows:
Panels with List Groups
We can include list groups in any panel. Create a panel by adding the `.panel` and `.panel-default` classes to a `` element, and then add a list inside the panel. Example:
Panel heading
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 Name Registration
- Free Window Space hosting
- Number of Images
- 24*7 support
- Renewal cost per year
View Online Example
The effect of the above example is as follows:
Bootstrap Media Object
Bootstrap Wells
ByteDance Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied and stable.
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 Basics
XML / Web Service
.NET
Website Building
Advertisement
Deep Dive
Programming
Scripting
Web Services
Scripting Languages
Web Service
Programming Languages
Computer Science
Web Design and Development
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 Object
Bootstrap List Group
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 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 Ethics and Safety
· How AI Works
· AI Tools Panorama
· Prompt Engineering
· Introduction to AI
· AI Beginner Tutorial
· Large Model Multimodal (M...
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Bookmark Article
Browsing History
Clear All
No records yet
Panel heading without title
Panel content
Panel With title
Panel content
` element. Example:
View Online Example
The effect of the above example is as follows:
Note that the panel footer does not inherit colors from contextual replacements because it is not in the preceding content.
Panels with Contextual Alternatives
You can use the `.panel-primary`, `.panel-success`, `.panel-info`, `.panel-warning`, and `.panel-danger` classes to create panels with contextual alternatives. Example:
View Online Example
The effect of the above example is as follows:
Panels with Tables
We can use the `.table` class to add a borderless table inside a panel. Use the `.panel-body` class to define additional text content for the table. Example:
View Online Example
The effect of the above example is as follows:
Panels with List Groups
We can include list groups in any panel. Create a panel by adding the `.panel` and `.panel-default` classes to 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
Panel title
This is a Basic panel
| Product | Price |
|---|---|
| Product A | 200 |
| Product B | 400 |
Panel Heading
| Product | Price |
|---|---|
| Product A | 200 |
| Product B | 400 |
` element, and then add a list inside the panel. Example:
View Online Example
The effect of the above example is as follows:
Bootstrap Media Object
Bootstrap Wells
ByteDance Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied and stable.
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 Basics
XML / Web Service
.NET
Website Building
Advertisement
Deep Dive
Programming
Scripting
Web Services
Scripting Languages
Web Service
Programming Languages
Computer Science
Web Design and Development
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 Object
Bootstrap List Group
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 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 Ethics and Safety
· How AI Works
· AI Tools Panorama
· Prompt Engineering
· Introduction to AI
· AI Beginner Tutorial
· Large Model Multimodal (M...
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Bookmark Article
Browsing History
Clear All
No records yet
Panel heading
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 Name Registration
- Free Window Space hosting
- Number of Images
- 24*7 support
- Renewal cost per year