Html Bootstrap Icon, colour, size

npm i bootstrap-icons

• Icons

  https://icons.getbootstrap.com/

• color

  https://getbootstrap.com/docs/5.0/utilities/colors/

• size

  https://getbootstrap.com/docs/5.0/utilities/text/

// Some code
<i class="bi bi-hourglass-split text-success fs-3"> Loading ....</i>

Background-color

.bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-info .bg-light .bg-dark .bg-white

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

// HTML text background and text color

   <span class="badge bg-success text-primary"> text </span>

.text-muted  or   .bg-muted

   Indicates the text color in light grey. Used to mute the text.

.text-primary

   Indicates the text color in blue. Used to indicate the importance of a text

.text-success

   Indicates the text color in green. Used to indicate success

.text-info

   Indicates the text color in light blue. Used to indicate some information

.text-warning

   Indicates the text color in yellow. Used to indicate a warning

.text-danger

   Indicates the text color in red. Used to indicate danger

.text-secondary

   Indicates the text color in grey. Used to indicate secondary text

.text-white

   Indicates the text color in white

.text-dark

   Indicates the text color in dark grey

.text-body

   Indicates the text color in black. This is the default text color

.text-light

   Indicates the text color in light grey on the white background

// Some code

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>