Bootstrap 4 Colors

Introduction

In our previous blog, we explored important Bootstrap features such as the Affix Plugin, Bootstrap Filters, and the powerful Container system. These components help structure and enhance web layouts, giving your website a strong foundation.

In this part, we’re diving deeper into Bootstrap 4 with practical topics like Form Inputs, Media Objects, the dynamic Carousel Plugin, Colors, Spinners, and Cards. These elements add interactivity, visual style, and organization to your pages.

Bootstrap 4 Colors

Colors help to visually communicate with users. Bootstrap 4 provides various text and background color utility classes. The classes for text colors are:

.text-muted
.text-primary
.text-success
.text-danger
.text-info
.text-warning
.text-secondary
.text-white
.text-dark
.text-body
.text-light

Text Colors

Use text color classes to change the color of text.

<h5 class="text-info">Information Message</h5>

<p class="text-primary">Primary text</p>

<p class="text-success">Success text</p>

<p class="text-danger">Danger text</p>

Contextual Text Classes for Links

These classes work with links and include hover effects:

<a href="#" class="text-warning">Warning Link</a>

50% Opacity Text

Make your text semi-transparent:

<p class="text-black-50">Black with 50% opacity</p>

<p class="text-white-50 bg-dark">White with 50% opacity on dark background</p>

Background Colors

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light are the classes for background colors. Change background using contextual classes:

<div class="bg-primary text-white">Primary Background</div>

<div class="bg-warning text-dark">Warning Background</div>

Request more information

Bootstrap 4 Colors