Bootstrap Colors

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

Text Color

Easily set text color by using .text-*{color}* class.

Default colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-dark

.text-grey

.text-black

.text-light

.text-white

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</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-grey">.text-grey</p>
<p class="text-black">.text-black</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-white bg-dark">.text-white</p>
Free

Body

Set slightly lighter color for body text to distinguish it from headings. Use .text-body for default black text, and .text-body-light if you have white text on dark background.

.text-body

.text-body-light

<p class="text-body">.text-body</p>
<p class="text-body-light bg-dark">.text-body-light</p>
Free

Muted

Muted color can be used when the text has just an informative function or it hasn’t to be so significant. Add .text-muted for default black text or .text-muted-light for white text on dark background.

.text-muted

.text-muted-light

<p class="text-muted">.text-muted</p>
<p class="text-muted-light bg-dark">.text-muted-light</p>
Free

Black text opacity

Use 10 predefined opacity variants of black text color. Add .text-black-{opacity} class to set a color that nicely blends to your design.

.text-black-5

.text-black-10

.text-black-20

.text-black-30

.text-black-40

.text-black-50

.text-black-60

.text-black-70

.text-black-80

.text-black-90

<p class="text-black-5">.text-black-5</p>
<p class="text-black-10">.text-black-10</p>
<p class="text-black-20">.text-black-20</p>
<p class="text-black-30">.text-black-30</p>
<p class="text-black-40">.text-black-40</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-black-60">.text-black-60</p>
<p class="text-black-70">.text-black-70</p>
<p class="text-black-80">.text-black-80</p>
<p class="text-black-90">.text-black-90</p>
Free

White text opacity

Use 10 predefined opacity variants of white text color. Add .text-white-{opacity} class to set a color that nicely blends to your design.

.text-white-5

.text-white-10

.text-white-20

.text-white-30

.text-white-40

.text-white-50

.text-white-60

.text-white-70

.text-white-80

.text-white-90

<p class="text-white-5">.text-white-5</p>
<p class="text-white-10">.text-white-10</p>
<p class="text-white-20">.text-white-20</p>
<p class="text-white-30">.text-white-30</p>
<p class="text-white-40">.text-white-40</p>
<p class="text-white-50">.text-white-50</p>
<p class="text-white-60">.text-white-60</p>
<p class="text-white-70">.text-white-70</p>
<p class="text-white-80">.text-white-80</p>
<p class="text-white-90">.text-white-90</p>
Pro

Custom color with hover

Quickly set text color without adding new lines to your stylesheet by using data-text-color="{color} h:{color}" attribute. This utility uses a JavaScript so you can any CSS color format.

Custom text color

Custom text color with hover

<p data-text-color="#7616ef">Custom text color</p>
<p data-text-color="#1fd5a1 h:rgba(0,0,0,.2)">Custom text color with hover</p>

Default

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

Torus Kit allows to set the color for all links at once by adding .links-white to the parent element. This way you don’t need to add .text-* for every link.

Even though this paragraph has .text-white class, but This link has still default color.

<div class="bg-primary bg-a-70 p-3">
  <p class="text-white">Even though this paragraph has <em>.text-white</em> class, but <a href="#">This link</a> has still default color.</p>
  <p class="text-white links-white">This paragraph is white and <a href="#">This link</a> is white also.</p>

  <!-- You can style a navigation list, too -->
  <nav class="nav links-white bg-black bg-a-10">
    <a class="nav-link" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
  </nav>
</div>

Background color

Default

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
<div class="p-1 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-1 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-1 mb-2 bg-success text-white">.bg-success</div>
<div class="p-1 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-1 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-1 mb-2 bg-info text-white">.bg-info</div>
<div class="p-1 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-1 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-1 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-1 mb-2 bg-transparent text-dark">.bg-transparent</div>
Free

Lightness

Add .bg-l-* class into .bg-primary, .bg-secondary or .bg-grey background utility class to set color lightness.

.bg-primary .bg-l-100
.bg-primary .bg-l-95
.bg-primary .bg-l-90
.bg-primary .bg-l-85
.bg-primary .bg-l-80
.bg-primary .bg-l-75
.bg-primary .bg-l-70
.bg-primary .bg-l-65
.bg-primary .bg-l-60
.bg-primary .bg-l-55
.bg-primary
.bg-primary .bg-l-45
.bg-primary .bg-l-40
.bg-primary .bg-l-35
.bg-primary .bg-l-30
.bg-primary .bg-l-25
.bg-primary .bg-l-20
.bg-primary .bg-l-15
.bg-primary .bg-l-10
.bg-primary .bg-l-5
.bg-primary .bg-l-0
.bg-secondary .bg-l-100
.bg-secondary .bg-l-95
.bg-secondary .bg-l-90
.bg-secondary .bg-l-85
.bg-secondary .bg-l-80
.bg-secondary .bg-l-75
.bg-secondary .bg-l-70
.bg-secondary .bg-l-65
.bg-secondary .bg-l-60
.bg-secondary .bg-l-55
.bg-secondary
.bg-secondary .bg-l-45
.bg-secondary .bg-l-40
.bg-secondary .bg-l-35
.bg-secondary .bg-l-30
.bg-secondary .bg-l-25
.bg-secondary .bg-l-20
.bg-secondary .bg-l-15
.bg-secondary .bg-l-10
.bg-secondary .bg-l-5
.bg-secondary .bg-l-0
.bg-grey .bg-l-100
.bg-grey .bg-l-95
.bg-grey .bg-l-90
.bg-grey .bg-l-85
.bg-grey .bg-l-80
.bg-grey .bg-l-75
.bg-grey .bg-l-70
.bg-grey .bg-l-65
.bg-grey .bg-l-60
.bg-grey .bg-l-55
.bg-grey
.bg-grey .bg-l-45
.bg-grey .bg-l-40
.bg-grey .bg-l-35
.bg-grey .bg-l-30
.bg-grey .bg-l-25
.bg-grey .bg-l-20
.bg-grey .bg-l-15
.bg-grey .bg-l-10
.bg-grey .bg-l-5
.bg-grey .bg-l-0
Free

Alpha opacity

Add .bg-a-* class into .bg-primary, .bg-secondary or .bg-grey background utility class to set alpha opacity value.

.bg-primary
.bg-primary .bg-a-95
.bg-primary .bg-a-90
.bg-primary .bg-a-85
.bg-primary .bg-a-80
.bg-primary .bg-a-75
.bg-primary .bg-a-70
.bg-primary .bg-a-65
.bg-primary .bg-a-60
.bg-primary .bg-a-55
.bg-primary .bg-a-50
.bg-primary .bg-a-45
.bg-primary .bg-a-40
.bg-primary .bg-a-35
.bg-primary .bg-a-30
.bg-primary .bg-a-25
.bg-primary .bg-a-20
.bg-primary .bg-a-15
.bg-primary .bg-a-10
.bg-primary .bg-a-5
.bg-primary .bg-a-0
.bg-secondary
.bg-secondary .bg-a-95
.bg-secondary .bg-a-90
.bg-secondary .bg-a-85
.bg-secondary .bg-a-80
.bg-secondary .bg-a-75
.bg-secondary .bg-a-70
.bg-secondary .bg-a-65
.bg-secondary .bg-a-60
.bg-secondary .bg-a-55
.bg-secondary .bg-a-50
.bg-secondary .bg-a-45
.bg-secondary .bg-a-40
.bg-secondary .bg-a-35
.bg-secondary .bg-a-30
.bg-secondary .bg-a-25
.bg-secondary .bg-a-20
.bg-secondary .bg-a-15
.bg-secondary .bg-a-10
.bg-secondary .bg-a-5
.bg-secondary .bg-a-0
.bg-grey
.bg-grey .bg-a-95
.bg-grey .bg-a-90
.bg-grey .bg-a-85
.bg-grey .bg-a-80
.bg-grey .bg-a-75
.bg-grey .bg-a-70
.bg-grey .bg-a-65
.bg-grey .bg-a-60
.bg-grey .bg-a-55
.bg-grey .bg-a-50
.bg-grey .bg-a-45
.bg-grey .bg-a-40
.bg-grey .bg-a-35
.bg-grey .bg-a-30
.bg-grey .bg-a-25
.bg-grey .bg-a-20
.bg-grey .bg-a-15
.bg-grey .bg-a-10
.bg-grey .bg-a-5
.bg-grey .bg-a-0

Black background color alpha opacity

Control alpha channel (opacity) of .bg-black color using .bg-a-* class.

.bg-black
.bg-black .bg-a-95
.bg-black .bg-a-90
.bg-black .bg-a-85
.bg-black .bg-a-80
.bg-black .bg-a-75
.bg-black .bg-a-70
.bg-black .bg-a-65
.bg-black .bg-a-60
.bg-black .bg-a-55
.bg-black .bg-a-50
.bg-black .bg-a-45
.bg-black .bg-a-40
.bg-black .bg-a-35
.bg-black .bg-a-30
.bg-black .bg-a-25
.bg-black .bg-a-20
.bg-black .bg-a-15
.bg-black .bg-a-10
.bg-black .bg-a-5
.bg-black .bg-a-0

White background color alpha opacity

Control alpha channel (opacity) of .bg-white color using .bg-a-* class.

.bg-white
.bg-white .bg-a-95
.bg-white .bg-a-90
.bg-white .bg-a-85
.bg-white .bg-a-80
.bg-white .bg-a-75
.bg-white .bg-a-70
.bg-white .bg-a-65
.bg-white .bg-a-60
.bg-white .bg-a-55
.bg-white .bg-a-50
.bg-white .bg-a-45
.bg-white .bg-a-40
.bg-white .bg-a-35
.bg-white .bg-a-30
.bg-white .bg-a-25
.bg-white .bg-a-20
.bg-white .bg-a-15
.bg-white .bg-a-10
.bg-white .bg-a-5
.bg-white .bg-a-0
Pro

Custom background color with hover

Torus Kit allows you to set custom background color together with :hover state. Use data-bg-color="{color} h:{color}" attribute to set a default background color using {color} parameter and background color on :hover using h:{color} parameter. JavaScript is used to generate a CSS style, so you can use any CSS format color.

Custom background color
Custom background color with hover
Custom background color with hover
<div class="p-1 mb-2 text-white" data-bg-color="#7616ef">Custom background color</div>
<div class="p-1 mb-2 text-white" data-bg-color="#1fd5a1 h:#02c28b">Custom background color with hover</div>
<div class="p-1 mb-2 text-body" data-bg-color="rgba(239, 46, 114, 0.3) h:rgba(239, 46, 114, 0.5)">Custom background color with hover</div>

Background gradient

When $enable-gradients is set to true (default is false), you can use .bg-gradient- utility classes. Learn about our Sass options to enable these classes and more.

  • .bg-gradient-primary
  • .bg-gradient-secondary
  • .bg-gradient-success
  • .bg-gradient-danger
  • .bg-gradient-warning
  • .bg-gradient-info
  • .bg-gradient-light
  • .bg-gradient-dark

Dealing with specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.