Divider

A divider for separating content. Can separate different text paragraphs, inline text, and links.

Horizontal Divider

The default is a horizontal divider. Text can be placed in the middle. Dashed lines are supported.

This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...

This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...

With Text

This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...

This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...

<template>
  <p>This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...</p>
  <b-divider></b-divider>
  <p>This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...</p>
  <b-divider>With Text</b-divider>
  <p>This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...</p>
  <b-divider dashed></b-divider>
  <p>This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...This is a paragraph...</p>
</template>

Verticaldivider

Use type="vertical" to set an inline vertical divider.

Text

Link1

Link2

<template>
  Text
  <b-divider type="vertical"></b-divider>
  <a href="#">Link1</a>
  <b-divider type="vertical"></b-divider>
  <a href="#">Link2</a>
</template>

Titleposition

The align property sets the title position. Use align="left" for left-aligned title.

Left

Center

Right

<template>
  <div>
    <div style="height: 25px">
      <b-divider align="left">Left</b-divider>
    </div>
    <div style="height: 25px">
      <b-divider align="center">Center</b-divider>
    </div>
    <div style="height: 25px">
      <b-divider align="right">Right</b-divider>
    </div>
  </div>
</template>

Props

Parameter	Description	Type	Options	Default
type	Horizontal or vertical type	String	horizontal / vertical	horizontal
align	Divider title position	String	left / right / center	center
dashed	Whether to use dashed line	Boolean	false / true	false