badge
bootstrap5.css
bootstrap5.css
.badge {
display: inline-block;
padding: 0.25em 0.4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
.badge {
transition: none;
}
}
bootstrap5.css
a.badge:hover,
a.badge:focus {
text-decoration: none;
}
bootstrap5.css
.badge:empty {
display: none;
}
bootstrap5.css
.btn .badge {
position: relative;
top: -1px;
}
bootstrap5.css
.badge-pill {
padding-right: 0.6em;
padding-left: 0.6em;
border-radius: 10rem;
}
bootstrap5.css
.badge-primary {
color: #fff;
background-color: #007bff;
}
bootstrap5.css
a.badge-primary:hover,
a.badge-primary:focus {
color: #fff;
background-color: #0062cc;
}
bootstrap5.css
a.badge-primary:focus,
a.badge-primary.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.badge-secondary {
color: #fff;
background-color: #6c757d;
}
bootstrap5.css
a.badge-secondary:hover,
a.badge-secondary:focus {
color: #fff;
background-color: #545b62;
}
bootstrap5.css
a.badge-secondary:focus,
a.badge-secondary.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
bootstrap5.css
.badge-success {
color: #fff;
background-color: #28a745;
}
bootstrap5.css
a.badge-success:hover,
a.badge-success:focus {
color: #fff;
background-color: #1e7e34;
}
bootstrap5.css
a.badge-success:focus,
a.badge-success.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
bootstrap5.css
.badge-info {
color: #fff;
background-color: #17a2b8;
}
bootstrap5.css
a.badge-info:hover,
a.badge-info:focus {
color: #fff;
background-color: #117a8b;
}
bootstrap5.css
a.badge-info:focus,
a.badge-info.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
bootstrap5.css
.badge-warning {
color: #212529;
background-color: #ffc107;
}
bootstrap5.css
a.badge-warning:hover,
a.badge-warning:focus {
color: #212529;
background-color: #d39e00;
}
bootstrap5.css
a.badge-warning:focus,
a.badge-warning.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
bootstrap5.css
.badge-danger {
color: #fff;
background-color: #dc3545;
}
bootstrap5.css
a.badge-danger:hover,
a.badge-danger:focus {
color: #fff;
background-color: #bd2130;
}
bootstrap5.css
a.badge-danger:focus,
a.badge-danger.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
bootstrap5.css
.badge-light {
color: #212529;
background-color: #f8f9fa;
}
bootstrap5.css
a.badge-light:hover,
a.badge-light:focus {
color: #212529;
background-color: #dae0e5;
}
bootstrap5.css
a.badge-light:focus,
a.badge-light.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
bootstrap5.css
.badge-dark {
color: #fff;
background-color: #343a40;
}
bootstrap5.css
a.badge-dark:hover,
a.badge-dark:focus {
color: #fff;
background-color: #1d2124;
}
bootstrap5.css
a.badge-dark:focus,
a.badge-dark.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
bootstrap5.css
@media print {
/* 印刷字に利用するCSS mediaで大きく括って、それぞれのタグの設定をする */
*,
*::before,
*::after {
text-shadow: none !important;
box-shadow: none !important;
}
a:not(.btn) {
text-decoration: underline;
}
abbr[title]::after {
content: " (" attr(title) ")";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #adb5bd;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
@page {
size: a3;
}
body {
min-width: 992px !important;
}
.container {
min-width: 992px !important;
}
.navbar {
display: none;
}
.badge {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #dee2e6 !important;
}
.table-dark {
color: inherit;
}
.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
border-color: #dee2e6;
}
.table .thead-dark th {
color: inherit;
border-color: #dee2e6;
}
}
html bootstrap5 Sample
バッジ基本的な使用例:badge
primary 1
secondary 11
success 111
danger 1111
warning 0
info 99
light 999
dark 9999
<p>primary <span class="badge badge-primary">1</span></p>
<p>secondary <span class="badge badge-secondary">11</span></p>
<p>success <span class="badge badge-success">111</span></p>
<p>danger <span class="badge badge-danger">1111</span></p>
<p>warning <span class="badge badge-warning">0</span></p>
<p>info <span class="badge badge-info">99</span></p>
<p>light <span class="badge badge-light">999</span></p>
<p>dark <span class="badge badge-dark">9999</span></p>
ピル型のバッジを作成する:badge-pill
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
バッジによるカウンター表示:button
スクリーンリーダー視覚支援 非表示テキスト:sr-only
バッジ付きリストグループ:badge-pill
- リスト項目1 14
- リスト項目2 2
- リスト項目3 1
<ul class="list-group">
<!-- justify-content-betweenで左と右端にする -->
<!-- align-items-centerで縦整列にする -->
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト項目1
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト項目2
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト項目3
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>