Switch to: Bulma Framework Demo Page

Bulma Demo

This page is for showing how Bulma is different!

Heading 1

Heading 2

Heading 5

Just a Paragraph ¶.

Just a Paragraph ¶ with the title class.

Just a Paragraph ¶ with the block class.

Just a Paragraph ¶ with the block class that I made bigger, except for one Tiny word!

H4 with "subtitle"

H4 with no classes

A paragraph without the block class.

A paragraph without the block class doesn't get vertical padding.

A paragraph with the block class.

A paragraph with the block class does.

This side shows the source for the other side!

Semantic tags are still useful for other purposes, but from a design standpoint they're equivalent to <P> and <DIV> tags.

<div class="columns section">

  <div class="column is-one-third">
    <h1 class="title">Bulma Demo</h1>
    <p class="block">This page is for showing how Bulma is different!</p>

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h5>Heading 5</h5>
    <p>Just a Paragraph ¶.</p>
    <p class="title">Just a Paragraph ¶ with the title class.</p>
    <p class="block">Just a Paragraph ¶ with the block class.</p>
    <p class="block is-size-3">Just a Paragraph ¶ with the block class that I made bigger!.</p>

    <h4 class="subtitle">H4 with "subtitle"</h4>
    <h4>H4 with no classes</h4>
    <p >A paragraph without the block class.</p>
    <p >A paragraph without the block class doesn't get vertical padding.</p>
    <p class="block">A paragraph with the block class.</p>
    <p class="block">A paragraph with the block class does.</p>

  </div>

  <div class="column is-two-thirds">
    <div class="subtitle">This side shows the source for the other side!</div>
    <p class="block">Semantic tags are still useful for other purposes, but from a design standpoint they're equivalent to &lt;P&gt; and &lt;DIV&gt; tags. </p>
  </div>

</div>