Logo v4.3.1
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v4.3.1
  • Docs
  • Snippets
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Duotone Icons
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Spinners
  • Steps
  • Tab
  • Tables
  • Text Highlight
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Input Mask
  • Step Forms (Wizards)
  • Range Slider (noUiSlider)
  • Add Field
  • Toggle Password
  • Count Characters
  • Toggle Switch
  • Toggle State
  • Switch
  • Media
  • Fullscreen Lightbox
  • Video Background
  • Video Player
  • Swiper
  • Others
  • Maps (Leaflet)
  • Chart.js
  • Circles.js (Pie Chart)
  • Sticky Block
  • Countdown
  • Sorting (Shuffle.js)
  • Go To
  • Show Animation
  • Typed.js
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • 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

              
                <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>