Logo Logo v2.0
Image Description Image Description

No Results

  • Get Support
  • Preview Demo
Logo Logo v2.0
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Dark Mode New
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Button Group
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Sliding Image
  • Spinners
  • Steps
  • Tab
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Navbar Vertical Aside
  • Scrollspy
  • Tables
  • Tables
  • Datatables
  • Sticky Header
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • Datepicker (Flatpickr)
  • Date Range Picker
  • Calendar (Fullcalendar)
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Copy to Clipboard
  • Input Mask
  • Step Forms (Wizards)
  • Add Field
  • Toggle Password
  • Count Characters
  • Form Search
  • Toggle Switch
  • Google reCAPTCHA
  • Charts
  • Chart.js
  • Counter
  • Circles.js (Pie Chart)
  • Others
  • Fullscreen Lightbox
  • Leaflet
  • JSVectorMap
  • SortableJS
  • Sticky Block
  • Go To
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Z-index
  • Opacity

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>