static/scss/bootstrap-4.0.0-alpha.6/docs/utilities/colors.md

   1 ---
   2 layout: docs
   3 title: Colors
   4 group: utilities
   5 ---
   6
   7 Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
   8
   9 {% example html %}
  10 <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
  11 <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  12 <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
  13 <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  14 <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
  15 <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
  16 <p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>
  17 {% endexample %}
  18
  19 Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.**
  20
  21 {% example html %}
  22 <a href="#" class="text-muted">Muted link</a>
  23 <a href="#" class="text-primary">Primary link</a>
  24 <a href="#" class="text-success">Success link</a>
  25 <a href="#" class="text-info">Info link</a>
  26 <a href="#" class="text-warning">Warning link</a>
  27 <a href="#" class="text-danger">Danger link</a>
  28 {% endexample %}
  29
  30 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.
  31
  32 {% example html %}
  33 <div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
  34 <div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
  35 <div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
  36 <div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
  37 <div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
  38 <div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
  39 <div class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</div>
  40 {% endexample %}
  41
  42 {% callout info %}
  43 #### Dealing with specificity
  44
  45 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.
  46 {% endcallout %}
  47
  48 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
  49 {{ callout-include | markdownify }}