Link ​

Links without Router ​

By defaut links with no options will default to # location.

<BLink>Link</BLink>

Links with Router and External Links ​

By specifying a value in the href prop, a standard link (<a>) element will be rendered. To generate a <router-link> instead, specify the route location via the to prop.

Router links support various additional props. Refer to the Router support reference section for details.

If your app is running under Nuxt.js, the <nuxt-link> component will be used instead of <router-link>. The <nuxt-link> component supports all the same features as <router-link> (as it is a wrapper component for <router-link>) and more.

<BLink href="https://getbootstrap.com/docs/5.3" target="_blank" rel="noopener" class="me-2">
  External Link to Bootstrap
</BLink>
<BLink to="sample" class="me-2"> To page sample </BLink>
<BLink href="#comp-ref--props"> Jump to Properties </BLink>

Styling Links ​

External Links can be specified with the href prop.

<BLink
  class="btn btn-primary me-2"
  href="https://getbootstrap.com/docs/5.3"
  target="_blank"
  rel="noopener"
>
  External Link to Bootstrap
</BLink>
<BLink
  class="btn btn-primary disabled"
  href="https://getbootstrap.com/docs/5.3"
  target="_blank"
  rel="noopener"
>
  Disabled Link
</BLink>

Link opacity ​

Change the alpha opacity of the link rgba() color value. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.

<template>
  <p v-for="opacity in opacities" :key="opacity">
    <BLink :opacity="opacity"> {{ opacity }} link </BLink>
  </p>
</template>

<script setup lang="ts">
import {type LinkOpacity} from 'bootstrap-vue-next'
const opacities: LinkOpacity[] = [10, 25, 50, 75, 100]
</script>

You can even change the opacity level on hover.

<template>
  <p v-for="opacity in opacities" :key="opacity">
    <BLink :opacity-hover="opacity"> {{ opacity }} link </BLink>
  </p>
</template>

<script setup lang="ts">
import {type LinkOpacity} from 'bootstrap-vue-next'
const opacities: LinkOpacity[] = [10, 25, 50, 75, 100]
</script>

Link underlines ​

Underline color ​

Change the underline’s color independent of the link text color.

<template>
  <p v-for="color in variants" :key="color">
    <BLink :underline-variant="color"> {{ color }} link </BLink>
  </p>
</template>

<script setup lang="ts">
import {type BaseColorVariant} from 'bootstrap-vue-next'
const variants: (keyof BaseColorVariant)[] = [
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
]
</script>

Underline offset ​

Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current font-size.

<template>
  <p v-for="offset in offsets" :key="offset">
    <BLink :underline-offset="offset"> {{ offset }} link </BLink>
  </p>
</template>

<script setup lang="ts">
import {type UnderlineOffset} from 'bootstrap-vue-next'
const offsets: UnderlineOffset[] = [1, 2, 3]
</script>

Underline opacity ​

Change the underline’s opacity.

<template>
  <p v-for="opacity in opacities" :key="opacity">
    <BLink :underline-opacity="opacity"> {{ opacity }} link </BLink>
  </p>
</template>

<script setup lang="ts">
import {type UnderlineOpacity} from 'bootstrap-vue-next'
const opacities: UnderlineOpacity[] = [10, 25, 50, 75, 100]
</script>

Hover variants ​

Just like the setting opacity has a matching opacity-hover prop, underline-offset and underline-opacity have matching underline-offset-hover and underline-opacity-hover props. Mix and match to create unique link styles.

<BLink
  :underline-offset="3"
  underline-opacity="25"
  underline-offset-hover="1"
  underline-opacity-hover="100"
>
  Mutliple variants
</BLink>

Colored Links ​

You can use the variant prop to colorize links. 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.

<template>
  <p v-for="color in variants" :key="color">
    <BLink :variant="color"> {{ color }} link </BLink>
  </p>
</template>

<script setup lang="ts">
import {type BaseColorVariant} from 'bootstrap-vue-next'
const variants: (keyof BaseColorVariant)[] = [
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
]
</script>

Link disabled state ​

Disable link functionality by setting the disabled prop to true.

<BLink href="#foo" disabled>Disabled Link</BLink>

Disabling a link will set the Bootstrap v5 .disabled class on the link as well as handles stopping event propagation, preventing the default action from occurring, and removing the link from the document tab sequence (tabindex="-1").

a.disabled {
  pointer-events: none;
}