bulma/docs/documentation/start/alternative-versions.html

---
title: Alternative versions of Bulma
layout: docs
theme: start
doc-tab: start
doc-subtab: alternative-versions
breadcrumb:
  - home
  - documentation
  - start
  - start-alternative-versions
---

{% capture html_normal %}
<section class="section">
  <div class="container has-text-centered">
    <h1 class="title">
      Hello World
    </h1>
    <p class="subtitle">
      My first website with
      <strong class="has-text-primary">Bulma</strong>!
    </p>
  </div>
</section>
{% endcapture %}

{% capture html_prefixed %}
<section class="bulma-section">
  <div class="bulma-container bulma-has-text-centered">
    <h1 class="bulma-title">
      Hello World
    </h1>
    <p class="bulma-subtitle">
      My first website with
      <strong class="bulma-has-text-primary">Bulma</strong>!
    </p>
  </div>
</section>
{% endcapture %}

{% capture html_no_helpers %}
<section class="section">
  <div class="container">
    <h1 class="title">
      Hello World
    </h1>
    <p class="subtitle">
      My first website with
      <strong>Bulma</strong>!
    </p>
  </div>
</section>
{% endcapture %}

{% capture html_prefixed_no_helpers %}
<section class="bulma-section">
  <div class="bulma-container">
    <h1 class="bulma-title">
      Hello World
    </h1>
    <p class="bulma-subtitle">
      My first website with
      <strong>Bulma</strong>!
    </p>
  </div>
</section>
{% endcapture %}

<div class="content">
  <p>Because different people have different requirements, Bulma comes in different versions ready to use:</p>
</div>

<table class="table is-bordered is-fullwidth">
  <thead>
    <tr>
      <th>Version</th>
      <th>Prefix</th>
      <th>Usage</th>
      <th>Download</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <strong>Complete</strong><br>
        <em style="white-space: nowrap">(Library + Helpers)</em>
      </td>
      <td>None</td>
      <td>
        {% highlight html -%}
        {{- html_normal -}}
        {%- endhighlight %}
      </td>
      <td>
        <div class="buttons">
          <a class="button is-primary" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.css">bulma.css</a>
          <a class="button is-primary" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css">bulma.min.css</a>
        </div>
      </td>
    </tr>
    <tr>
      <td><strong>Prefixed</strong></td>
      <td><code>bulma-</code></td>
      <td>
        {% highlight html -%}
        {{- html_prefixed -}}
        {%- endhighlight %}
      </td>
      <td>
        <div class="buttons">
          <a class="button is-primary" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/versions/bulma-prefixed.css">bulma-prefixed.css</a>
          <a class="button is-primary" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/versions/bulma-prefixed.min.css">bulma-prefixed.min.css</a>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <strong>Library Only</strong><br>
        <em>No Helpers</em>
      </td>
      <td>None</td>
      <td>
        {% highlight html -%}
        {{- html_no_helpers -}}
        {%- endhighlight %}
      </td>
      <td>
        <div class="buttons">
          <a class="button is-primary" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/versions/bulma-no-helpers.css">bulma-no-helpers.css</a>
          <a class="button is-primary" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/versions/bulma-no-helpers.min.css">bulma-no-helpers.min.css</a>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <strong>No Helpers, Prefixed</strong><br>
        <em>Library Only</em>
      </td>
      <td><code>bulma-</code></td>
      <td>
        {% highlight html -%}
        {{- html_prefixed_no_helpers -}}
        {%- endhighlight %}
      </td>
      <td>
        <div class="buttons">
          <a class="button is-primary" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/versions/bulma-no-helpers-prefixed.css">bulma-no-helpers-prefixed.css</a>
          <a class="button is-primary" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/versions/bulma-no-helpers-prefixed.min.css">bulma-no-helpers-prefixed.min.css</a>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <strong>No Dark Mode</strong><br>
        <em>Light Theme Only</em>
      </td>
      <td>None</td>
      <td>
        {% highlight html -%}
        {{- html_normal -}}
        {%- endhighlight %}
      </td>
      <td>
        <div class="buttons">
          <a class="button is-primary" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/versions/bulma-no-dark-mode.css">bulma-no-dark-mode.css</a>
          <a class="button is-primary" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/versions/bulma-no-dark-mode.min.css">bulma-no-dark-mode.min.css</a>
        </div>
      </td>
    </tr>
  </tbody>
</table>