Colors Fun
Example
Color is a sensation that is produced when light energy hits an object which is reflected or transmitted directly by that object so that it can be seen by the observer's eye. Each color certainly has its own meaning in it. There are several types of colors such as general, primary, tertiary, and secondary colors. This color is needed for several things, including for design needs like purplefont.
Theme Colors
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they naturally fill the full width of its parent element. This is easily customized with our various sizing options.
Font Colors
Font color is the choice of color that will be applied to writing or text. Sometimes, color is used to convey meaning beyond the basic text.
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
This text is dark grey.
Default body color (often black).
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>Contextual Link Colors
Hover over the links. This is a link given in several colors
<a class="text-muted" href="#">Muted link.</a>
<a class="text-primary" href="#">Primary link.</a>
<a class="text-success" href="#">Success link.</a>
<a class="text-info" href="#">Info link.</a>
<a class="text-warning" href="#">Warning link.</a>
<a class="text-danger" href="#">Danger link.</a>
<a class="text-secondary" href="#">Secondary link.</a>
<a class="text-dark" href="#">Dark grey link.</a>
<a class="text-body" href="#">Body/black link.</a>
<a class="text-light" href="#">Light grey link.</a>Opacity Text Colors
It is possible to add text transparency to text using the RGBA color values to set the opacity. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Opacity can be added to text using the RGBA color values to set the opacity:
This text is red with 20% opacity.
This text is red with 50% opacity.
This text is red with 100% opacity.
<p style="color:rgba(255, 0, 0, 0.2);">This text is red with 20% opacity.</p>
<p style="color:rgba(255, 0, 0, 0.5);">This text is red with 50% opacity.</p>
<p style="color:rgba(255, 0, 0, 1.0);">This text is red with 100% opacity.</p>Background Colors
The Bootstrap 5 background-color utility adds background color to any element. There are color options available in Bootstrap 5 for setting the background color.
The classes for background colors are: .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-dark and .bg-light. Note that background colors do not set the text color, so in some cases you'll want to use them together with a.text-* class.
<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>