Image Description

No Results

  • Get Support
  • Preview Demo
  • Docs
  • Snippets
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • List Group
  • Lists
  • Modal
  • Offcanvas
  • Pagination
  • Popovers
  • Progress
  • Shapes
  • Sliding Image
  • Spinners
  • Steps
  • Tab
  • Tables
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Media
  • Fullscreen Lightbox
  • Swiper Touch Slider
  • Others
  • Sticky Block
  • Countdown
  • Video Background
  • Go To
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Z-index

Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Bootstrap Colors documentation

Color

Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.

  • Preview
  • HTML

.text-primary

.text-body

.text-success

.text-danger

.text-warning

.text-info

.text-dark

.text-body

.text-muted

.text-black-50

.text-white

.text-white-70

.text-reset

.text-inherit

              
                <p class="text-primary">.text-primary</p>
                <p class="text-body">.text-body</p>
                <p class="text-success">.text-success</p>
                <p class="text-danger">.text-danger</p>
                <p class="text-warning">.text-warning</p>
                <p class="text-info">.text-info</p>
                <p class="text-dark">.text-dark</p>
                <p class="text-body">.text-body</p>
                <p class="text-muted">.text-muted</p>
                <p class="text-black-50">.text-black-50</p>
                <p class="text-white bg-dark">.text-white</p>
                <p class="text-white-70 bg-dark">.text-white-70</p>
                <p class="text-reset">.text-reset</p>
                <a href="#"><p class="text-inherit">.text-inherit</p></a>