কিভাবে Weebly সাইটে বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<style>
.margin {
margin: 10px;
}
.progress {
background-color: #FFFFFF;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
.progress-label {
font-size: 18px;
padding: 8px 0;
}
.progress-xxs {
height: 3px;
}
.progress-xs {
height: 8px;
}
.progress-sm {
height: 12px;
}
.progress-bar-red {
background: #8b2626;
}
.progress-bar-blue {
background: #43668c;
}
.progress-bar-green {
background: #649f2b;
}
.progress-bar-aqua {
background: #86b998;
}
.progress-bar-yellow {
background: #d0b426;
}
.progress-bar-brown {
background: #6f6f55;
}
.progress-bar-violet {
background: #8270a4;
}
.progress-bar-orange {
background: #ae6926;
}
.sr-only {
position: relative !important
</style>

<!-- Thin Size Progress Bars -->
<div class="margin">
<h3 class="progress-label">Bootstrap
<span class="pull-right">92%</span>
</h3>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%">
</div>
</div>
<h3 class="progress-label">CoffeeScript
<span class="pull-right">68%</span>
</h3>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%">
</div>
</div>
<h3 class="progress-label">HTML/CSS
<span class="pull-right">78%</span>
</h3>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%">
</div>
</div>
</div>
<!-- End Thin Size Progress Bars -->

<!-- Medium Size Progress Bars -->
<div class="margin">
<h3 class="progress-label">Bootstrap
<span class="pull-right">92%</span>
</h3>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%">
</div>
</div>
<h3 class="progress-label">CoffeeScript
<span class="pull-right">68%</span>
</h3>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%">
</div>
</div>
<h3 class="progress-label">HTML/CSS
<span class="pull-right">78%</span>
</h3>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%">
</div>
</div>
</div>
<!-- End Medium Size Progress Bars -->

<!-- Thick Size Progress Bars -->
<div class="margin">
<h3 class="progress-label">Bootstrap
<span class="pull-right">92%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%">
</div>
</div>
<h3 class="progress-label">CoffeeScript
<span class="pull-right">68%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%">
</div>
</div>
<h3 class="progress-label">HTML/CSS
<span class="pull-right">78%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%">
</div>
</div>
</div>
<!-- End Thick Size Progress Bars -->

<!-- Default Size Progress Bars -->
<div class="margin">
<h3 class="progress-label">Bootstrap
<span class="pull-right">92%</span>
</h3>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%">
</div>
</div>
<h3 class="progress-label">CoffeeScript
<span class="pull-right">68%</span>
</h3>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%">
</div>
</div>
<h3 class="progress-label">HTML/CSS
<span class="pull-right">78%</span>
</h3>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%">
</div>
</div>
</div>
<!-- End Default Size Progress Bars -->

<div class="col-md-6">
<!-- Red -->
<h3 class="progress-label">Red
<span class="pull-right">92%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
</div>
</div>
<!-- End Red -->
<!-- Blue -->
<h3 class="progress-label">Blue
<span class="pull-right">68%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-blue" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%">
</div>
</div>
<!-- End Blue -->
<!-- Green -->
<h3 class="progress-label">Green
<span class="pull-right">78%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%">
</div>
</div>
<!-- End Green -->
<!-- Aqua -->
<h3 class="progress-label">Aqua
<span class="pull-right">78%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%">
</div>
</div>
<!-- End Aqua -->
</div>
<div class="col-md-6">
<!-- Yellow -->
<h3 class="progress-label">Yellow
<span class="pull-right">92%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
</div>
</div>
<!-- End Yellow -->
<!-- Brown -->
<h3 class="progress-label">Brown
<span class="pull-right">68%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-brown" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%">
</div>
</div>
<!-- End Brown -->
<!-- Violet -->
<h3 class="progress-label">Violet
<span class="pull-right">78%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-violet" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%">
</div>
</div>
<!-- End Violet -->
<!-- Orange -->
<h3 class="progress-label">Orange
<span class="pull-right">78%</span>
</h3>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%">
</div>
</div>
<!-- End Orange -->
</div>
<!-- End Colored Progress Bars -->

<!-- Colored Progress Bars with Text -->
<div class="margin">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
<span class="sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
<span class="sr-only">70% Complete (info)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60%Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
<span class="sr-only">50% Complete (danger)</span>
</div>
</div>
</div>
<!-- End Colored Progress Bars with Text -->

<!-- Striped Progress Bars -->
<div class="margin">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
<span class="sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only">80% Complete (info)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60%Complete (warning)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
<span class="sr-only">50% Complete (danger)</span>
</div>
</div>
</div>
<!-- End Striped Progress Bars -->

<!-- Animated Progress Bars -->
<div class="margin">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
<span class="sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
<span class="sr-only">50% Complete (info)</span>
</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only">80%Complete (warning)</span>
</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
<span class="sr-only">70% Complete (danger)</span>
</div>
</div>
</div>
<!-- End Animated Progress Bars -->