Colour and icons make a website considerably easier to scan at a glance and give it a friendlier, more finished feel, and Bootstrap provides simple, consistent tools for both without needing a design background.

Text colours

<p class="text-primary">Blue text</p>
<p class="text-danger">Red text</p>
<p class="text-muted">Grey, subtle text</p>

Background colours

<div class="bg-success text-white p-3">Green box</div>

Pairing a background colour with text-white, or occasionally text-dark on a lighter background, keeps text readable, since Bootstrap does not automatically adjust text colour to match whatever background colour happens to be applied.

The theme colour palette

Bootstrap ships with a small set of named theme colours meant to be used consistently across a whole site: primary for the main brand colour and default actions, secondary for less prominent actions, success for positive outcomes, danger for errors or destructive actions, warning for caution, and info for neutral notices.

Adding Bootstrap Icons

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<i class="bi bi-heart"></i>

Bootstrap Icons is a separate, free icon set that pairs naturally with the rest of the framework. Once linked, any icon becomes available simply by using its class name on an i element.

Icons inside buttons

<button class="btn btn-primary">
  <i class="bi bi-download"></i> Download
</button>

Combining a small icon with a short label is usually clearer than either alone, giving users both a quick visual cue and an unambiguous written description of what the button does.

Sizing icons

Bootstrap Icons scale with the surrounding font size by default, so wrapping an icon in an element with a larger font-size utility, such as fs-3, is enough to make it bigger without needing a dedicated icon-sizing system.

Using colour with meaning, and with contrast in mind

Keeping colours consistent with their meaning, green for success, red for danger, blue for primary actions, helps users learn the pattern quickly and navigate more confidently. It is equally important that text stays readable against its background; light grey text on a white background, or white text on a pale yellow warning background, can fail basic contrast guidelines even though it might look fine to someone without any visual impairment, so it is worth checking colour pairings rather than assuming Bootstrap's defaults are automatically accessible in every combination.