Bulma Divider

A simple yet powerful divider extension for Bulma.

The Divider extension allows you to easily display horizontal or vertical lines to separate your content. It supports custom text, icons, and images centered or aligned along the line.

Horizontal

Standard horizontal line. Use .is-divider and optional .divider-content for text, icons, or images overlays.

<!-- Simple -->
<div class="is-divider"></div>

<!-- With Text -->
<div class="is-divider">
  <span class="divider-content">OR</span>
</div>

<!-- With Icon -->
<div class="is-divider">
  <span class="divider-content">
    <i class="fas fa-star"></i>
  </span>
</div>

<!-- With Image -->
<div class="is-divider">
  <span class="divider-content">
    <img src="/placeholder.png" width="32" height="32">
  </span>
</div>

Text above divider.

Text below divider.

OR

Divider with icon.

Divider with image.

32x32 Placeholder

Color Variations

Apply Bulma core colors using standard modifiers like is-primary, is-info, etc.

Primary
Info
Success
Warning
Danger
Link

Left Side

Content one

AND

Right Side

Content two

Vertical

Use .is-vertical with .is-divider for vertical separation.

<div class="columns">
  <div class="column">Left</div>
  <div class="is-divider is-vertical">
    <span class="divider-content">AND</span>
  </div>
  <div class="column">Right</div>
</div>

Alignment

Use is-start or is-end to align the content along the line.

Horizontal

Left
Center
Right

Vertical

Content
Top
Content
Middle
Content
Bottom
Content
<!-- Horizontal -->
<div class="is-divider is-start">
    <span class="divider-content">Left</span>
</div>

<!-- Vertical -->
<div class="is-divider is-vertical is-end">
    <span class="divider-content">Bottom</span>
</div>