English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Badges are commonly used on web pages to indicate valuable information, such as important titles, warning messages, notification counters, etc. Badges are mainly used to highlight new or unread items. To use badges, simply add the .badge class with a specified meaning color class (such as .badge-secondary) added to <span> can be changed according to the size of the parent element. Badges can change size based on the size of their parent element:
!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>badge</h2> <h1>Bootstrap heading <span class="badge badge-secondary">New</span></h1> <h2>Bootstrap heading <span class="badge badge-secondary">New</span></h2> <h3>Bootstrap heading <span class="badge badge-secondary">New</span></h3> <h4>Bootstrap heading <span class="badge badge-secondary">New</span></h4> <h5>Bootstrap heading <span class="badge badge-secondary">New</span></h5> <h6>Bootstrap heading <span class="badge badge-secondary">New</span></h6> </div> </body> </html>Test and See ‹/›
The following lists all color types of badges:
!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>various color types of badges</h2> <span class="badge badge-primary">primary</span> <span class="badge badge-secondary">secondary</span> <span class="badge badge-success">success</span> <span class="badge badge-danger">danger</span> <span class="badge badge-warning">warning</span> <span class="badge badge-info">info</span> <span class="badge badge-light">light</span> <span class="badge badge-dark">dark</span> </div> </body> </html>Test and See ‹/›
Use .badge-pill class to set pill-shaped badges:
!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>pill-shaped badge</h2> <span class="badge badge-pill badge-default">default</span> <span class="badge badge-pill badge-primary">primary</span> <span class="badge badge-pill badge-success">success</span> <span class="badge badge-pill badge-info">info</span> <span class="badge badge-pill badge-warning">warning</span> <span class="badge badge-pill badge-danger">danger</span> </div> </body> </html>Test and See ‹/›
The following example embeds badges within buttons:
!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Badge Embedded in Button</h2> <button type="button" class="btn btn-primary"> Messages <span class="badge badge-light">4</span> </button> <button type="button" class="btn btn-danger"> Notifications <span class="badge badge-light">7</span> </button> </div> </body> </html>Test and See ‹/›