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>



<div class="columns">
  <div class="column"></div>
  <div class="is-divider-vertical" data-content="OR"></div>
  <div class="column"></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-font-size $size-7
$divider-color $grey-light