Logo v2.3.1
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v2.3.1
  • Docs
  • Snippets
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Duotone Icons
  • Illustrations
  • Figma
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Banners
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • List Group
  • Lists
  • Modal
  • Offcanvas
  • Pagination
  • Popovers
  • Progress
  • Shapes
  • 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
  • Sorting (Shuffle.js)
  • Go To
  • Show Animation
  • Typedjs
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Lines
  • Links
  • Position
  • Rotations
  • 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-primary-light

.text-primary-dark

.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-white-50

.text-reset

.text-inherit

              
                <p class="text-primary">.text-primary</p>
                <p class="text-primary-light">.text-primary-light</p>
                <p class="text-primary-dark">.text-primary-dark</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-white-50 bg-dark">.text-white-50</p>
                <p class="text-reset">.text-reset</p>
                <a href="#"><p class="text-inherit">.text-inherit</p></a>