HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

Bootstrap Colors

Bootstrap provides a set of contextual color classes that you can use to style various elements. These classes are named based on color names or contextual meanings. Here are some of the commonly used Bootstrap color classes:

Text Color Classes:
  • '.text-primary': Sets the text color to the primary color.
  • '.text-secondary': Sets the text color to the secondary color.
  • '.text-success', '.text-danger', '.text-warning', '.text-info': Sets text color based on contextual meaning.

    • Background Color Classes:
  • .bg-primary': Sets the background color to the primary color.
  • '.bg-secondary': Sets the background color to the secondary color.
  • '.bg-success', '.bg-danger', '.bg-warning', '.bg-info': Sets background color based on contextual meaning.

    • Contextual Classes:
  • '.text-light', '.bg-light': Sets text or background color to a light color.
  • '.text-dark',' .bg-dark': Sets text or background color to a dark color.

    • Example

    <div class="bg-primary text-white">
      This is a content with primary background color
    </div>
    

<div class="bg-success text-dark">
      This is a content with success background color
    </div>
    

<div class="bg-warning text-dark">
      This is a content with warning background color
    </div>
    You can click on above box to edit the code and run again.

    Output