Documentation

Everything you need to start with Bulma-extensions.

New version with a lot of new functionalities and its documentation is now available on its new repository CreativeBulma - BulmaDivider.

Divider

Display a vertical or horizontal divider to segment your design.

View on Github

NPM Package 0.2.0

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>
    

Styles

Vertical

Column 1

Column 2
Note: divider stretches to parent's height.

      <div class="columns">
  <div class="column">Column 1</div>
  <div class="is-divider-vertical" data-content="OR"></div>
  <div class="column">
    Column 2 <br/>
    Note: divider stretches to parent's height.
  </div>
</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`