Bootstrap 5 Tutorial

BS5 Colors

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="b996fedb-2c56-4c6a-b4f6-5c8d030d8e57" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Colors</h3>
<p>Bootstrap 5 offers a comprehensive color palette that helps you style your application and maintain consistency across your design. The color utility classes can be applied to text, backgrounds, borders, and more, making it easy to create visually appealing layouts.</p>
<hr />
<h3>Key Features of Bootstrap 5 Colors</h3>
<ol>
<li>
<p><strong>Color Palette</strong>: A predefined set of colors for text and backgrounds, including primary, secondary, success, danger, warning, info, light, dark, and muted colors.</p>
</li>
<li>
<p><strong>Text Colors</strong>: Utility classes to change the color of text easily.</p>
</li>
<li>
<p><strong>Background Colors</strong>: Utility classes to apply background colors to elements.</p>
</li>
<li>
<p><strong>Border Colors</strong>: Utility classes to set border colors for elements.</p>
</li>
<li>
<p><strong>Custom Colors</strong>: The option to create custom colors using SASS variables if you need specific shades.</p>
</li>
</ol>
<hr />
<h3>Example: Using Colors in Bootstrap 5</h3>
<p>Here&rsquo;s a simple example demonstrating various color utilities in Bootstrap 5:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 5 Colors&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;style&gt;
        .custom-bg {
            background-color: #6c757d; /* Custom gray color */
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 5 Colors&lt;/h1&gt;

&lt;h2&gt;Text Colors&lt;/h2&gt;
        &lt;p class="text-primary"&gt;This is a primary text.&lt;/p&gt;
        &lt;p class="text-secondary"&gt;This is a secondary text.&lt;/p&gt;
        &lt;p class="text-success"&gt;This text indicates success.&lt;/p&gt;
        &lt;p class="text-danger"&gt;This text indicates danger.&lt;/p&gt;
        &lt;p class="text-warning"&gt;This text indicates a warning.&lt;/p&gt;
        &lt;p class="text-info"&gt;This text provides additional information.&lt;/p&gt;
        &lt;p class="text-light bg-dark"&gt;This is light text on a dark background.&lt;/p&gt;
        &lt;p class="text-dark"&gt;This is dark text.&lt;/p&gt;
        &lt;p class="text-muted"&gt;This is muted text.&lt;/p&gt;

&lt;h2 class="mt-4"&gt;Background Colors&lt;/h2&gt;
        &lt;div class="bg-primary text-white p-3"&gt;Primary Background&lt;/div&gt;
        &lt;div class="bg-secondary text-white p-3"&gt;Secondary Background&lt;/div&gt;
        &lt;div class="bg-success text-white p-3"&gt;Success Background&lt;/div&gt;
        &lt;div class="bg-danger text-white p-3"&gt;Danger Background&lt;/div&gt;
        &lt;div class="bg-warning text-dark p-3"&gt;Warning Background&lt;/div&gt;
        &lt;div class="bg-info text-white p-3"&gt;Info Background&lt;/div&gt;
        &lt;div class="bg-light text-dark p-3"&gt;Light Background&lt;/div&gt;
        &lt;div class="bg-dark text-white p-3"&gt;Dark Background&lt;/div&gt;
        &lt;div class="custom-bg text-white p-3"&gt;Custom Background Color&lt;/div&gt;

&lt;h2 class="mt-4"&gt;Border Colors&lt;/h2&gt;
        &lt;div class="border border-primary p-3"&gt;Primary Border&lt;/div&gt;
        &lt;div class="border border-secondary p-3"&gt;Secondary Border&lt;/div&gt;
        &lt;div class="border border-success p-3"&gt;Success Border&lt;/div&gt;
        &lt;div class="border border-danger p-3"&gt;Danger Border&lt;/div&gt;
        &lt;div class="border border-warning p-3"&gt;Warning Border&lt;/div&gt;
        &lt;div class="border border-info p-3"&gt;Info Border&lt;/div&gt;
        &lt;div class="border border-light p-3"&gt;Light Border&lt;/div&gt;
        &lt;div class="border border-dark p-3"&gt;Dark Border&lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Text Colors</strong>: The example includes various paragraphs with text utility classes that apply different colors, demonstrating how easily you can change text styles.</li>
<li><strong>Background Colors</strong>: Several <code>&lt;div&gt;</code> elements showcase background color utilities, displaying how these classes can be used to color background areas.</li>
<li><strong>Border Colors</strong>: Demonstrates how to apply border colors to elements using Bootstrap's border utility classes.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More