bootstrap
  1. bootstrap-colors
PreviousNext

Bootstrap Colors

  • Bootstrap provides a wide range of colors that can be used to style your website.
  • These colors are predefined and can be easily applied to different elements on your web page.

Syntax

To apply a Bootstrap color class to an element, you just need to add the class name to the element's tag, for example:

  • Primary: text-primary
  • Secondary: text-secondary
  • Success: text-success
  • Danger: text-danger
  • Warning: text-warning
  • Info: text-info
  • Light: text-light
  • Dark: text-dark
  • etc..

Example

Here are some examples of Bootstrap colors

<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-warning-emphasis">.text-warning-emphasis</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-light-emphasis">.text-light-emphasis</p>
<p class="text-dark bg-white">.text-dark</p>
<p class="text-dark-emphasis">.text-dark-emphasis</p>

<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>

<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Try Playground

Opacity

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>
Try Playground

Explanation

Bootstrap uses a predefined color palette that includes a set of colors that are commonly used in web design. These colors are designed to work well together and create a harmonious color scheme for your website.

Various Bootstrap classes can be used to apply colors to different elements. For example, btn-primary is used to apply the primary color to buttons, while text-primary can be used to apply the primary color to text.

Use

Bootstrap colors can be used to add visual interest to your website and make it look more attractive. They can also be used to create a consistent visual language across your site by using the same colors repeatedly.

Important Points

  • Bootstrap provides a variety of colors that can be used to style different elements
  • These colors are predefined and can be easily applied to different elements on your web page
  • Bootstrap provides classes for various colors that can be used to add color to different components.

Summary

Bootstrap colors can be easily applied to various elements on a web page and provide a convenient way to add visual interest to your site. By using Bootstrap's predefined color palette, you can create a professional-looking website with a consistent visual language.

TablesBorders
Published on: