# Html Bootstrap Icon, colour, size

* 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>
```

<pre><code>// HTML text background and text color

   &#x3C;span class="badge bg-success text-primary"> text &#x3C;/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

<strong>   Indicates the text color in yellow. Used to indicate a warning
</strong>
.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
</code></pre>

```
// 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>
```