Progress
Progress bars show how far a task, a goal or a quota has come. Below are the basic bars with labels, heights, colours, stripes and stacked segments, followed by practical widgets such as uploads, goals, storage meters, wizards, rating breakdowns and a circular ring.
1Basic bars
The width of <code>.progress-bar</code> shows the value; ARIA attributes describe it for screen readers.
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Basic example 0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Basic example 25" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Basic example 50" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 50%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Basic example 75" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 75%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Basic example 100" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 100%">
</div>
</div>
</div>2Labels
Put text inside the bar; <code>.overflow-visible</code> keeps a long label readable on a short bar.
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Label example" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 78%">
78%
</div>
</div>
</div>
<div class="progress" role="progressbar" aria-label="Long label example" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar overflow-visible text-dark" style="width: 12%">
Only 12% of the upload is done
</div>
</div>3Height
Set the height on <code>.progress</code>; the bar follows.
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Thin" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 2px">
<div class="progress-bar" style="width: 40%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Medium" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
<div class="progress-bar" style="width: 55%">
</div>
</div>
</div>
<div class="progress" role="progressbar" aria-label="Tall" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="height: 24px">
<div class="progress-bar" style="width: 70%">
</div>
</div>4Backgrounds
Background utilities colour the bar.
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="bg-success bar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 25%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="bg-info bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info" style="width: 50%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="bg-warning bar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning" style="width: 75%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="bg-danger bar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 100%">
</div>
</div>
</div>5Striped
<code>.progress-bar-striped</code> adds a diagonal stripe pattern.
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Striped 0" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-success" style="width: 20%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Striped 1" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-info" style="width: 40%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Striped 2" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%">
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Striped 3" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 80%">
</div>
</div>
</div>6Animated stripes
Add <code>.progress-bar-animated</code> so the stripes move - a clear sign that work is ongoing.
<div class="progress" role="progressbar" aria-label="Animated" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%">
</div>
</div>7Multiple bars
<code>.progress-stacked</code> puts several segments side by side in one track.
<div class="progress-stacked">
<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
<div class="progress-bar">
</div>
</div>
<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
<div class="progress-bar bg-success">
</div>
</div>
<div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<div class="progress-bar bg-info">
</div>
</div>
</div>8Contrasting labels
<code>.text-bg-*</code> sets a matching background and readable text colour in one class.
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Done" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar text-bg-success" style="width: 90%">
Done 90%
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Almost" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar text-bg-warning" style="width: 65%">
Almost 65%
</div>
</div>
</div>
<div class="mb-2">
<div class="progress" role="progressbar" aria-label="Late" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar text-bg-danger" style="width: 40%">
Late 40%
</div>
</div>
</div>9Label row
Name on the left, percentage on the right, thin bar below.
Bank-grade encryption41%
24/7 support45%
Bank-grade encryption52%
<div class="mb-3">
<div class="d-flex justify-content-between small mb-1">
<span>Bank-grade encryption</span><span class="fw-semibold">41%</span>
</div>
<div class="progress" role="progressbar" aria-label="Bank-grade encryption" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100" style="height: 6px">
<div class="progress-bar" style="width: 41%">
</div>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between small mb-1">
<span>24/7 support</span><span class="fw-semibold">45%</span>
</div>
<div class="progress" role="progressbar" aria-label="24/7 support" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="height: 6px">
<div class="progress-bar" style="width: 45%">
</div>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between small mb-1">
<span>Bank-grade encryption</span><span class="fw-semibold">52%</span>
</div>
<div class="progress" role="progressbar" aria-label="Bank-grade encryption" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100" style="height: 6px">
<div class="progress-bar" style="width: 52%">
</div>
</div>
</div>10Skill bars
A compact grid of labelled skill or score bars.
Planning
83
Design
74
Writing
43
Support
91
<div class="row align-items-center g-2 mb-2">
<div class="col-4 col-sm-3 small">
Planning
</div>
<div class="col">
<div class="progress" role="progressbar" aria-label="Planning" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 83%">
</div>
</div>
</div>
<div class="col-2 col-sm-1 small text-end">
83
</div>
</div>
<div class="row align-items-center g-2 mb-2">
<div class="col-4 col-sm-3 small">
Design
</div>
<div class="col">
<div class="progress" role="progressbar" aria-label="Design" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 74%">
</div>
</div>
</div>
<div class="col-2 col-sm-1 small text-end">
74
</div>
</div>
<div class="row align-items-center g-2 mb-2">
<div class="col-4 col-sm-3 small">
Writing
</div>
<div class="col">
<div class="progress" role="progressbar" aria-label="Writing" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 43%">
</div>
</div>
</div>
<div class="col-2 col-sm-1 small text-end">
43
</div>
</div>
<div class="row align-items-center g-2 mb-2">
<div class="col-4 col-sm-3 small">
Support
</div>
<div class="col">
<div class="progress" role="progressbar" aria-label="Support" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 91%">
</div>
</div>
</div>
<div class="col-2 col-sm-1 small text-end">
91
</div>
</div>11File uploads
Per-file upload rows with type icon, status text, a thin bar and a remove button.
- report.pdfComplete
- cover.png57% - 5 MB
- assets.zip33% - 8 MB
<ul class="list-group">
<li class="list-group-item"><div class="d-flex align-items-center gap-3"><span class="fs-4 text-primary"><i class="bi bi-file-earmark-pdf-fill" aria-hidden="true"></i></span><div class="flex-grow-1"><div class="d-flex justify-content-between small"><span class="fw-semibold">report.pdf</span><span class="text-body-secondary">Complete</span></div><div class="progress mt-1" role="progressbar" aria-label="report.pdf upload" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height:5px"><div class="progress-bar bg-success" style="width: 100%"></div></div></div><button type="button" class="btn btn-sm btn-link link-secondary" aria-label="Remove report.pdf"><i class="bi bi-x-lg" aria-hidden="true"></i></button></div></li>
<li class="list-group-item"><div class="d-flex align-items-center gap-3"><span class="fs-4 text-primary"><i class="bi bi-file-earmark-image-fill" aria-hidden="true"></i></span><div class="flex-grow-1"><div class="d-flex justify-content-between small"><span class="fw-semibold">cover.png</span><span class="text-body-secondary">57% - 5 MB</span></div><div class="progress mt-1" role="progressbar" aria-label="cover.png upload" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style="height:5px"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 57%"></div></div></div><button type="button" class="btn btn-sm btn-link link-secondary" aria-label="Remove cover.png"><i class="bi bi-x-lg" aria-hidden="true"></i></button></div></li>
<li class="list-group-item"><div class="d-flex align-items-center gap-3"><span class="fs-4 text-primary"><i class="bi bi-file-earmark-zip-fill" aria-hidden="true"></i></span><div class="flex-grow-1"><div class="d-flex justify-content-between small"><span class="fw-semibold">assets.zip</span><span class="text-body-secondary">33% - 8 MB</span></div><div class="progress mt-1" role="progressbar" aria-label="assets.zip upload" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="height:5px"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 33%"></div></div></div><button type="button" class="btn btn-sm btn-link link-secondary" aria-label="Remove assets.zip"><i class="bi bi-x-lg" aria-hidden="true"></i></button></div></li>
</ul>12Goal card
A fundraising or sales goal with the amount reached and the target.
Smarter payments for growing companies
$26,270.00
raised of $37,000.00 goal
71% funded30 days left
<div class="card" style="max-width:360px">
<div class="card-body">
<h3 class="h6 card-title">Smarter payments for growing companies</h3>
<p class="fs-3 fw-bold mb-0">$26,270.00</p>
<p class="small text-body-secondary">raised of $37,000.00 goal</p>
<div class="progress" role="progressbar" aria-label="Goal" aria-valuenow="71" aria-valuemin="0" aria-valuemax="100" style="height: 10px">
<div class="progress-bar bg-success" style="width: 71%">
</div>
</div>
<div class="d-flex justify-content-between small mt-2">
<span>71% funded</span><span>30 days left</span>
</div>
</div>
</div>13Storage usage
A stacked bar with a legend shows how space is split.
Storage55 GB of 100 GB
DocumentsPhotosBackups
<div style="max-width:460px">
<div class="d-flex justify-content-between small mb-1">
<span class="fw-semibold">Storage</span><span>55 GB of 100 GB</span>
</div>
<div class="progress-stacked mb-2" style="height:12px">
<div class="progress" role="progressbar" aria-label="Documents" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" style="width: 24%; height:12px">
<div class="progress-bar">
</div>
</div>
<div class="progress" role="progressbar" aria-label="Photos" aria-valuenow="16" aria-valuemin="0" aria-valuemax="100" style="width: 16%; height:12px">
<div class="progress-bar bg-warning">
</div>
</div>
<div class="progress" role="progressbar" aria-label="Backups" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%; height:12px">
<div class="progress-bar bg-info">
</div>
</div>
</div>
<div class="d-flex flex-wrap gap-3 small">
<span><span class="d-inline-block rounded-circle bg-primary me-1" style="width:.6rem;height:.6rem"></span>Documents</span><span><span class="d-inline-block rounded-circle bg-warning me-1" style="width:.6rem;height:.6rem"></span>Photos</span><span><span class="d-inline-block rounded-circle bg-info me-1" style="width:.6rem;height:.6rem"></span>Backups</span>
</div>
</div>14Wizard steps
A progress track with step labels under it for multi-step forms.
Account Details Payment Done
<div>
<div class="progress" role="progressbar" aria-label="Step 2 of 4" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 6px">
<div class="progress-bar" style="width: 50%">
</div>
</div>
<div class="d-flex justify-content-between small mt-2">
<span class="text-primary fw-semibold"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Account</span><span class="text-primary fw-semibold"><i class="bi bi-record-circle-fill" aria-hidden="true"></i> Details</span><span class="text-body-secondary"><i class="bi bi-circle-fill" aria-hidden="true"></i> Payment</span><span class="text-body-secondary"><i class="bi bi-circle-fill" aria-hidden="true"></i> Done</span>
</div>
</div>15Card top bar
A borderless thin bar across the top edge of a card shows that it is refreshing.
Invoicing
Friendly people answer your questions quickly, by phone, chat or email.
<div class="card overflow-hidden" style="max-width:380px">
<div class="progress" role="progressbar" aria-label="Refreshing" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 3px; border-radius: 0">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%">
</div>
</div>
<div class="card-body">
<h3 class="h6 card-title">Invoicing</h3>
<p class="card-text small mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>16In a table
Project rows with a bar per row; colour reflects the state.
| Project | Progress | Done |
|---|---|---|
| A beginner's guide to getting started | 37% | |
| Paying international suppliers without high fees | 11% | |
| How a coffee roaster cut card fees by a third | 19% | |
| Looking back at a busy season | 11% |
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead>
<tr>
<th scope="col">Project</th>
<th scope="col">Progress</th>
<th scope="col" class="text-end">Done</th>
</tr>
</thead>
<tbody>
<tr>
<td class="small">A beginner's guide to getting started</td>
<td style="min-width:120px"><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100" style="height: 6px"><div class="progress-bar" style="width: 37%"></div></div></td>
<td class="small text-end">37%</td>
</tr>
<tr>
<td class="small">Paying international suppliers without high fees</td>
<td style="min-width:120px"><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100" style="height: 6px"><div class="progress-bar bg-danger" style="width: 11%"></div></div></td>
<td class="small text-end">11%</td>
</tr>
<tr>
<td class="small">How a coffee roaster cut card fees by a third</td>
<td style="min-width:120px"><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="19" aria-valuemin="0" aria-valuemax="100" style="height: 6px"><div class="progress-bar bg-danger" style="width: 19%"></div></div></td>
<td class="small text-end">19%</td>
</tr>
<tr>
<td class="small">Looking back at a busy season</td>
<td style="min-width:120px"><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100" style="height: 6px"><div class="progress-bar bg-danger" style="width: 11%"></div></div></td>
<td class="small text-end">11%</td>
</tr>
</tbody>
</table>
</div>17Rating breakdown
Star rating distribution, as used on review pages.
4.8 from 411 reviews
5 70%
4 21%
3 9%
2 1%
1 1%
<div style="max-width:380px">
<p class="mb-2"><span class="fs-3 fw-bold">4.8</span> <span class="text-body-secondary small">from 411 reviews</span></p>
<div class="d-flex align-items-center gap-2 mb-1 small">
<span style="width:2.5rem">5 <i class="bi bi-star-fill" aria-hidden="true"></i></span>
<div class="flex-grow-1">
<div class="progress" role="progressbar" aria-label="5 star ratings" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
<div class="progress-bar bg-warning" style="width: 70%">
</div>
</div>
</div>
<span class="text-body-secondary text-end" style="width:2.5rem">70%</span>
</div>
<div class="d-flex align-items-center gap-2 mb-1 small">
<span style="width:2.5rem">4 <i class="bi bi-star-fill" aria-hidden="true"></i></span>
<div class="flex-grow-1">
<div class="progress" role="progressbar" aria-label="4 star ratings" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
<div class="progress-bar bg-warning" style="width: 21%">
</div>
</div>
</div>
<span class="text-body-secondary text-end" style="width:2.5rem">21%</span>
</div>
<div class="d-flex align-items-center gap-2 mb-1 small">
<span style="width:2.5rem">3 <i class="bi bi-star-fill" aria-hidden="true"></i></span>
<div class="flex-grow-1">
<div class="progress" role="progressbar" aria-label="3 star ratings" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
<div class="progress-bar bg-warning" style="width: 9%">
</div>
</div>
</div>
<span class="text-body-secondary text-end" style="width:2.5rem">9%</span>
</div>
<div class="d-flex align-items-center gap-2 mb-1 small">
<span style="width:2.5rem">2 <i class="bi bi-star-fill" aria-hidden="true"></i></span>
<div class="flex-grow-1">
<div class="progress" role="progressbar" aria-label="2 star ratings" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
<div class="progress-bar bg-warning" style="width: 1%">
</div>
</div>
</div>
<span class="text-body-secondary text-end" style="width:2.5rem">1%</span>
</div>
<div class="d-flex align-items-center gap-2 mb-1 small">
<span style="width:2.5rem">1 <i class="bi bi-star-fill" aria-hidden="true"></i></span>
<div class="flex-grow-1">
<div class="progress" role="progressbar" aria-label="1 star ratings" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
<div class="progress-bar bg-warning" style="width: 1%">
</div>
</div>
</div>
<span class="text-body-secondary text-end" style="width:2.5rem">1%</span>
</div>
</div>18Checklist progress
A card that shows how many tasks of a checklist are complete.
Launch checklist
2 / 4<div class="card" style="max-width:360px">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<h3 class="h6 mb-0">Launch checklist</h3>
<span class="badge text-bg-primary">2 / 4</span>
</div>
<div class="progress" role="progressbar" aria-label="Checklist" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 6px">
<div class="progress-bar bg-success" style="width: 50%">
</div>
</div>
<div class="mt-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="pt-1117" checked>
<label class="form-check-label text-decoration-line-through text-body-secondary" for="pt-1117">Write the brief</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="pt-1118" checked>
<label class="form-check-label text-decoration-line-through text-body-secondary" for="pt-1118">Collect feedback</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="pt-1119">
<label class="form-check-label" for="pt-1119">Prepare the files</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="pt-1120">
<label class="form-check-label" for="pt-1120">Publish</label>
</div>
</div>
</div>
</div>19Circular progress
A ring drawn with a conic gradient; set the value with the <code>--cb-p</code> variable.
33%
Visits
93%
Sales
32%
Tickets
<div class="d-flex flex-wrap gap-4">
<div class="text-center">
<div class="cb-ring" role="progressbar" aria-label="Visits" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="--cb-p:33;--cb-c:var(--ui-primary)">
<span>33%</span>
</div>
<div class="small mt-2">
Visits
</div>
</div>
<div class="text-center">
<div class="cb-ring" role="progressbar" aria-label="Sales" aria-valuenow="93" aria-valuemin="0" aria-valuemax="100" style="--cb-p:93;--cb-c:var(--ui-success)">
<span>93%</span>
</div>
<div class="small mt-2">
Sales
</div>
</div>
<div class="text-center">
<div class="cb-ring" role="progressbar" aria-label="Tickets" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100" style="--cb-p:32;--cb-c:var(--ui-warning)">
<span>32%</span>
</div>
<div class="small mt-2">
Tickets
</div>
</div>
</div>20Plan limits
Usage meters that turn yellow and red as a limit gets close, with an upgrade link.
<div class="border rounded p-3" style="max-width:400px">
<div class="mb-3">
<div class="d-flex justify-content-between small mb-1">
<span>Projects</span><span>4 / 10</span>
</div>
<div class="progress" role="progressbar" aria-label="Projects used" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
<div class="progress-bar" style="width: 40%">
</div>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between small mb-1">
<span>Team seats</span><span>8 / 10</span>
</div>
<div class="progress" role="progressbar" aria-label="Team seats used" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
<div class="progress-bar bg-warning" style="width: 80%">
</div>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between small mb-1">
<span>API calls</span><span>98 / 100k</span>
</div>
<div class="progress" role="progressbar" aria-label="API calls used" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
<div class="progress-bar bg-danger" style="width: 98%">
</div>
</div>
</div>
<a href="#" class="btn btn-sm btn-outline-primary"><i class="bi bi-rocket-takeoff-fill" aria-hidden="true"></i> Upgrade plan</a>
</div>