Bootstrap 4 Tutorial

BS4 Colors

Last modified on: October 25, 2024

<h1>Bootstrap 4 Colors</h1>
<p>Bootstrap 4 comes with a comprehensive color palette that allows developers to create visually appealing and responsive web designs. The framework includes built-in utility classes for text and background colors, enabling quick customization and styling.</p>
<h2>Key Features of Bootstrap 4 Colors</h2>
<ol>
<li>
<p><strong>Color Palette</strong>: Bootstrap 4 provides a set of predefined colors that can be easily applied to text and backgrounds.</p>
</li>
<li>
<p><strong>Text Color Utilities</strong>: Classes for setting text colors according to Bootstrap's color scheme.</p>
</li>
<li>
<p><strong>Background Color Utilities</strong>: Classes for setting background colors that correspond with text colors.</p>
</li>
<li>
<p><strong>Border Color Utilities</strong>: Classes for applying border colors to elements.</p>
</li>
</ol>
<h2>Color Palette</h2>
<p>Bootstrap 4 offers a range of colors, categorized into several classes, such as:</p>
<ul>
<li><strong>Primary</strong>: <code>bg-primary</code>, <code>text-primary</code></li>
<li><strong>Secondary</strong>: <code>bg-secondary</code>, <code>text-secondary</code></li>
<li><strong>Success</strong>: <code>bg-success</code>, <code>text-success</code></li>
<li><strong>Danger</strong>: <code>bg-danger</code>, <code>text-danger</code></li>
<li><strong>Warning</strong>: <code>bg-warning</code>, <code>text-warning</code></li>
<li><strong>Info</strong>: <code>bg-info</code>, <code>text-info</code></li>
<li><strong>Light</strong>: <code>bg-light</code>, <code>text-light</code></li>
<li><strong>Dark</strong>: <code>bg-dark</code>, <code>text-dark</code></li>
<li><strong>Muted</strong>: <code>bg-muted</code>, <code>text-muted</code></li>
<li><strong>White</strong>: <code>bg-white</code>, <code>text-white</code></li>
<li><strong>Transparent</strong>: <code>bg-transparent</code></li>
</ul>
<h2>Examples of Using Colors</h2>
<h3>1. Text Color Utilities</h3>
<p>You can apply text colors using the respective utility classes. Here&rsquo;s an example:</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;p class="text-primary"&gt;This text is primary color.&lt;/p&gt;
&lt;p class="text-secondary"&gt;This text is secondary color.&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 is a warning.&lt;/p&gt;
&lt;p class="text-info"&gt;This text provides information.&lt;/p&gt;
&lt;p class="text-light bg-dark"&gt;This text is light 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 text is muted.&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Background Color Utilities</h3>
<p>You can set background colors using the corresponding utility classes:</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;div class="bg-primary text-white p-3"&gt;This is a primary background with white text.&lt;/div&gt;
&lt;div class="bg-secondary text-white p-3"&gt;This is a secondary background with white text.&lt;/div&gt;
&lt;div class="bg-success text-white p-3"&gt;This background indicates success.&lt;/div&gt;
&lt;div class="bg-danger text-white p-3"&gt;This background indicates danger.&lt;/div&gt;
&lt;div class="bg-warning text-dark p-3"&gt;This background is a warning.&lt;/div&gt;
&lt;div class="bg-info text-white p-3"&gt;This background provides information.&lt;/div&gt;
&lt;div class="bg-light text-dark p-3"&gt;This is a light background with dark text.&lt;/div&gt;
&lt;div class="bg-dark text-white p-3"&gt;This is a dark background with white text.&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Border Color Utilities</h3>
<p>You can also apply border colors to elements using utility classes:</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;div class="border border-primary p-3"&gt;This element has a primary colored border.&lt;/div&gt;
&lt;div class="border border-success p-3"&gt;This element has a success colored border.&lt;/div&gt;
&lt;div class="border border-danger p-3"&gt;This element has a danger colored border.&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Example: Complete Bootstrap 4 Colors</h2>
<p>Here&rsquo;s a complete example demonstrating the use of Bootstrap 4 colors:</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 4 Colors Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 4 Colors&lt;/h1&gt;

&lt;h2&gt;Text Color Utilities&lt;/h2&gt;
        &lt;p class="text-primary"&gt;This text is primary color.&lt;/p&gt;
        &lt;p class="text-secondary"&gt;This text is secondary color.&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 is a warning.&lt;/p&gt;
        &lt;p class="text-info"&gt;This text provides information.&lt;/p&gt;
        &lt;p class="text-light bg-dark"&gt;This text is light 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 text is muted.&lt;/p&gt;

&lt;h2&gt;Background Color Utilities&lt;/h2&gt;
        &lt;div class="bg-primary text-white p-3"&gt;This is a primary background with white text.&lt;/div&gt;
        &lt;div class="bg-secondary text-white p-3"&gt;This is a secondary background with white text.&lt;/div&gt;
        &lt;div class="bg-success text-white p-3"&gt;This background indicates success.&lt;/div&gt;
        &lt;div class="bg-danger text-white p-3"&gt;This background indicates danger.&lt;/div&gt;
        &lt;div class="bg-warning text-dark p-3"&gt;This background is a warning.&lt;/div&gt;
        &lt;div class="bg-info text-white p-3"&gt;This background provides information.&lt;/div&gt;
        &lt;div class="bg-light text-dark p-3"&gt;This is a light background with dark text.&lt;/div&gt;
        &lt;div class="bg-dark text-white p-3"&gt;This is a dark background with white text.&lt;/div&gt;

&lt;h2&gt;Border Color Utilities&lt;/h2&gt;
        &lt;div class="border border-primary p-3"&gt;This element has a primary colored border.&lt;/div&gt;
        &lt;div class="border border-success p-3"&gt;This element has a success colored border.&lt;/div&gt;
        &lt;div class="border border-danger p-3"&gt;This element has a danger colored border.&lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>&nbsp;</h3>

Web Technology View More