Color

Convey meaning through color with a handful of color utility classes. Includes support for styling text and background colors via the semantic @color attribute.

Colors

Colorize text and backgrounds with color utilities. The @color attribute provides a semantic way to apply standard Bootstrap color themes.

.text-bg-primary
.text-bg-secondary
.text-bg-success
.text-bg-danger
.text-bg-warning
.text-bg-info
.text-bg-light
.text-bg-dark
<div color="primary">.text-bg-primary</div>
<div color="secondary">.text-bg-secondary</div>
<div color="success">.text-bg-success</div>
<div color="danger">.text-bg-danger</div>
<div color="warning">.text-bg-warning</div>
<div color="info">.text-bg-info</div>
<div color="light">.text-bg-light</div>
<div color="dark">.text-bg-dark</div>
<div outputclass="text-bg-primary">.text-bg-primary</div>
<div outputclass="text-bg-secondary">.text-bg-secondary</div>
<div outputclass="text-bg-success">.text-bg-success</div>
<div outputclass="text-bg-danger">.text-bg-danger</div>
<div outputclass="text-bg-warning">.text-bg-warning</div>
<div outputclass="text-bg-info">.text-bg-info</div>
<div outputclass="text-bg-light">.text-bg-light</div>
<div outputclass="text-bg-dark">.text-bg-dark</div>

Base DITA Elements

Decoration attributes can be applied to many base DITA elements to add background color and contrasting text.

Section Decoration

This section has a primary color background.

This div has a success color background.

        This pre has a warning color background.
This is a long quote with a danger color background.
Animal Gestation
Elephant (African and Asian) 19-22 months
Giraffe 15 months
Rhinoceros 14-16 months
Hippopotamus 7 1/2 months 
<section color="primary">
  <title>Section Decoration</title>
  <p>This section has a primary color background.</p>
</section>

<div color="success" padding="3">
  <p>This div has a success color background.</p>
</div>

<pre color="warning">
  This pre has a warning color background.
</pre>

<lq color="danger" padding="1">
  This is a long quote with a danger color background.
</lq>

<table color="primary" padding="1" width="100">
  <tgroup cols="2">
    <thead>
      <row>
        <entry>Animal</entry>
        <entry>Gestation</entry>
      </row>
    </thead>
    <tbody>
      <row color="info">
        ...
      </row>
      <row color="success">
        ...
      </row>
      <row>
        <entry>...</entry>
        <entry color="danger">...</entry>
      </row>
      <row>
        ...
      </row>
    </tbody>
  </tgroup>
</table>

<note color="primary">
  This is a note with a primary color theme.
</note>
<section outputclass="text-bg-primary">
  <title>Section Decoration</title>
  <p>This section has a primary color background.</p>
</section>

<div outputclass="text-bg-success p-3">
  <p>This div has a success color background.</p>
</div>

<pre outputclass="text-bg-warning">
  This pre has a warning color background.
</pre>

<lq outputclass="text-bg-danger p-1">
  ...
</lq>

<table outputclass="table-primary p-1 w-100">
  <tgroup cols="2">
    <thead>
      <row>
        <entry>Animal</entry>
        <entry>Gestation</entry>
      </row>
    </thead>
    <tbody>
      <row outputclass="table-info">
       ...
      </row>
      <row outputclass="table-success">
       ...
      </row>
      <row>
        <entry>...</entry>
        <entry outputclass="table-danger">...</entry>
      </row>
      <row>
        <entry>...</entry>
        <entry>...</entry>
      </row>
    </tbody>
  </tgroup>
</table>

<note color="primary">
  ...
</note>

Specialized Elements

Many specialized components also support the @color attribute for consistent theming.


Card Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

This is the first item's accordion body.

  • An item
  • A second item
<thumbnail href="..." color="warning"/>

<card color="success" width="50">
  <title>Card Title</title>
  <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
</card>

<accordion color="info">
  <accordion-item open="yes">
    <title>Accordion Item #1</title>
    <p>This is the first item's accordion body.</p>
  </accordion-item>
</accordion>

<list-group width="50" color="danger">
  <li>An item</li>
  <li>A second item</li>
</list-group>

<carousel color="dark" width="50" indicators="yes">
  <carousel-item>
    <image href="..."/>
  </carousel-item>
  <carousel-item>
    <image href="..."/>
  </carousel-item>
  <carousel-item>
    <image href="..."/>
  </carousel-item>
</carousel>
<img src="..." class="img-thumbnail bg-warning"/>

<section outputclass="card text-bg-success w-50">
  ...
</section>

<bodydiv outputclass="accordion accordion-info">
  ...
</bodydiv>

<ul outputclass="list-group list-group-item-danger w-50">
  ...
</ul>

<ul outputclass="carousel carousel-dark w-50">
  ...
</ul>

Alerts

Alerts provide contextual feedback messages for typical user actions.

A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
<alert color="primary">A simple primary alert—check it out!</alert>
<alert color="secondary">A simple secondary alert—check it out!</alert>
<alert color="success">A simple success alert—check it out!</alert>
<alert color="danger">A simple danger alert—check it out!</alert>
<div outputclass="alert alert-primary">A simple primary alert—check it out!</div>
<div outputclass="alert alert-secondary">A simple secondary alert—check it out!</div>
<div outputclass="alert alert-success">A simple success alert—check it out!</div>
<div outputclass="alert alert-danger">A simple danger alert—check it out!</div>

Text Color

For text-only colorization, the @outputclass attribute remains the primary method.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

<p outputclass="text-primary">.text-primary</p>
<p outputclass="text-secondary">.text-secondary</p>
<p outputclass="text-success">.text-success</p>
<p outputclass="text-danger">.text-danger</p>
<p outputclass="text-warning bg-dark">.text-warning</p>
<p outputclass="text-info bg-dark">.text-info</p>