Get started

You only need 1 CSS file to use BulmaDivider

Installation

First, let’s install the component!

There are several ways to get started with BulmaDivider.

Use npm to install the bulma-divider package recommended

npm install @creativebulma/bulma-divider

Then import the css in your project, for example like this:

@import "~@creativebulma/bulma-divider";

Use the jsDelivr CDN to link to the BulmaDivider stylesheet

https://www.jsdelivr.com/package/npm/@creativebulma/bulma-divider

Use the GitHub repository to get the latest development version.

Download from the repository https://github.com/CreativeBulma/bulma-divider/tree/master/dist/

Usage

All you have to do is to add a container with the divider class and with the text you want to display as value.

Styles

Horizontal (default)

Exemple

<div>
    <div class="divider">Exemple</div>
</div>

Vertical

The divider is available in vertical style. Simply append the modifier is-vertical to the divider element to apply the vertical version of the divider.

And

<div style="display: flex;">
    <div style="flex: 1;height: 200px; background-color: #f4f5f8"></div>
    <div class="divider is-vertical">And</div>
    <div style="flex: 1;height: 200px; background-color: #f4f5f8"></div>
</div>

Colors

Info
Success
Warning
Danger
Info light
Success light
Warning light
Danger light

<div>
    <div class="divider is-info">Info</div>
    <div class="divider is-success">Success</div>
    <div class="divider is-warning">Warning</div>
    <div class="divider is-danger">Danger</div>
    <div class="divider is-info is-light">Info light</div>
    <div class="divider is-success is-light">Success light</div>
    <div class="divider is-warning is-light">Warning light</div>
    <div class="divider is-danger is-light">Danger light</div>
</div>

Alignement

The divider is available in different alignements (by default divider text is centered).

To change the divider alignment, use the is-left or is-right modifier on the divider:

Left
Centered
Right

When applied to a vertical divider alignments are converted to top and bottom alignements.

And

And

And

<div>
    <div class="divider is-left">Left</div>
    <div class="divider">Centered</div>
    <div class="divider is-right">Right</div>
</div>

<p>When applied to a vertical divider alignments are converted to <code>top</code> and <code>bottom</code> alignements.</p>
<div style="display: flex;">
    <div style="flex: 1;height: 100px; background-color: #f4f5f8"></div>
    <div class="divider is-vertical is-left">And</div>
    <div style="flex: 1;height: 100px; background-color: #f4f5f8"></div>
</div>
<br />
<div style="display: flex;">
    <div style="flex: 1;height: 100px; background-color: #f4f5f8"></div>
    <div class="divider is-vertical">And</div>
    <div style="flex: 1;height: 100px; background-color: #f4f5f8"></div>
</div>
<br />
<div style="display: flex;">
    <div style="flex: 1;height: 100px; background-color: #f4f5f8"></div>
    <div class="divider is-vertical is-right">And</div>
    <div style="flex: 1;height: 100px; background-color: #f4f5f8"></div>
</div>