Colored links

Colored links with hover states

On this page

You can use the link attribute to colorize links. Unlike the text-color attribute ,

these classes have a :hover and :focus state.

Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link
vue
<template>
  <b-a link="primary">
    Primary link
  </b-a>
  <b-a link="secondary">
    Secondary link
  </b-a>
  <b-a link="success">
    Success link
  </b-a>
  <b-a link="danger">
    Danger link
  </b-a>
  <b-a link="warning">
    Warning link
  </b-a>
  <b-a link="info">
    Info link
  </b-a>
  <b-a link="light">
    Light link
  </b-a>
  <b-a link="dark">
    Dark link
  </b-a>
</template>

TIP

Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.