Display a vertical or horizontal divider to segment your design.

Colors No
Sizes No
Javascript No
Variables Yes

You can easily display a message on the divider by adding the data-content attribute to the divider.

<div class="is-divider" data-content="OR"></div>



Column 1
Column 2
<div class="columns">
  <div class="column">Column 1</div>
  <div class="is-divider-vertical" data-content="OR"></div>
  <div class="column">Column 2</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$divider-background-color $grey-lighter
$divider-thickness .1rem
$divider-font-size $size-7
$divider-color $grey-light