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.

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

        This pre has a warning color background.
      

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

Card Title

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

Accordion Item #1

This is the first item's accordion body.

• An item
• A second item

PreviousNext

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

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