bulma/docs/documentation/start/installation.html

---
title: How to install Bulma
layout: docs
theme: start
doc-tab: start
doc-subtab: installation
breadcrumb:
  - home
  - documentation
  - start
  - start-installation
---
{% capture jsdelivr_a %}
{%highlight css %}
@import "https://cdn.jsdelivr.net/npm/bulma@{{site.data.meta.version }}/css/bulma.min.css";
{% endhighlight %}
{% endcapture %}

{% capture jsdelivr_b %}
{% highlight html %}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css"
>
{% endhighlight %}
{% endcapture %}

{% capture jsdelivr_rtl_a %}
{% highlight css %}@import "https://cdn.jsdelivr.net/npm/bulma@{{
site.data.meta.version }}/css/bulma-rtl.min.css";{% endhighlight %}
{% endcapture %}

{% capture jsdelivr_rtl_b %}
{% highlight html %}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma-rtl.min.css"
>
{% endhighlight %}
{% endcapture %}

<div class="bd-options">
  <div class="bd-option bd-theme-css">
    <div class="block media is-align-items-center">
      <div class="media-left">
        <span class="icon is-flex is-large">
          <i class="fab fa-css3 fa-2x"></i>
        </span>
      </div>

      <div class="media-content">
        <p class="title is-4">Get the Bulma <strong>CSS</strong> file</p>
        <p class="subtitle">A single <code>.css</code> file that includes all of Bulma</p>
      </div>
    </div>

    <div class="bd-option-item">
      <p class="bd-option-title block has-text-grey-light is-size-5">
        <span class="button bd-fat-button is-success is-light is-pulled-right">Recommended</span>
        Option 1. <strong>Use a CDN</strong>
      </p>

      <p class="block">
        You can import the CSS file directly from
        <a href="{{ site.data.meta.jsdelivr }}" target="_blank">jsDelivr</a>:
      </p>

      {%
        include docs/components/tabs.html
        button_a="CSS @import" button_b="HTML <link />" item_a=jsdelivr_a
        item_b=jsdelivr_b
      %}

      <p class="block">
        Since the release of v1, the main version also works in <strong>RTL contexts</strong>, thanks to the use of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values">logical properties</a>. As a result, no separate RTL version of Bulma is developed anymore.
      </p>

      <p class="block">
        Bulma is also available via
        <a href="{{ site.data.meta.cdnjs }}" target="_blank">cdnjs</a>.
      </p>
    </div>

    <div class="bd-option-item">
      <p class="bd-option-title block has-text-grey-light is-size-5">
        Option 2. <strong>Download the Github release</strong>
      </p>

      <div class="block">You can get the latest Bulma release as a <code>.zip</code> from GitHub:</div>

      <a
        class="button bd-fat-button is-primary is-light"
        href="{{ site.data.meta.download }}"
      >
        Download v{{ site.data.meta.version }}
      </a>
    </div>
  </div>

  <div class="bd-option-or">
    <p>Or</p>
  </div>

  <div class="bd-option bd-theme-sass">
    <div class="block media is-align-items-center">
      <div class="media-left">
        <span class="icon is-flex is-large">
          <i class="fab fa-sass fa-2x"></i>
        </span>
      </div>

      <div class="media-content">
        <p class="title is-4">Get the Bulma <strong>Sass</strong> library</p>
        <p class="subtitle">A collection of <code>.sass</code> files to build your own version of Bulma</p>
      </div>
    </div>

    <div class="bd-option-item">
      <p class="bd-option-title block has-text-grey-light is-size-5">
        <span class="button bd-fat-button is-success is-light is-pulled-right">Recommended</span>
        Option 1. <strong>Install the NPM package</strong>
      </p>

      <p class="block">
        Bulma is available through
        <a href="{{ site.data.meta.npm }}" target="_blank">npm</a>:
      </p>

      {% capture npm_item %} {% highlight bash %}npm install bulma{%
      endhighlight %} {% endcapture %}
      {% capture yarn_item %} {% highlight bash
      %}yarn add bulma{% endhighlight %} {% endcapture %}
      {%
        include docs/components/tabs.html button_a="npm" button_b="yarn" item_a=npm_item
        item_b=yarn_item
      %}

      <p class="block">
        Bulma is also available via
        <a href="{{ site.data.meta.cdnjs }}" target="_blank">cdnjs</a>.
      </p>
    </div>

    <div class="bd-option-item">
      <p class="bd-option-title block has-text-grey-light is-size-5">
        Option 2. <strong>Clone the GitHub repository</strong>
      </p>

      <p class="block">
        Bulma is available on
        <a href="{{ site.data.meta.github }}" target="_blank">GitHub</a>:
      </p>

      {% capture git_ssh %} {% highlight bash %}{{ site.data.meta.git_ssh }}{%
      endhighlight %} {% endcapture %}
      {% capture git_https %} {% highlight bash
      %}{{ site.data.meta.git_https }}{% endhighlight %} {% endcapture %}
      {% capture git_cli %} {% highlight bash %}{{ site.data.meta.git_cli }}{%
      endhighlight %} {% endcapture %}
      {%
        include docs/components/tabs.html
        button_a="SSH" button_b="HTTPS" button_c="GitHub CLI" item_a=git_ssh
        item_b=git_https item_c=git_cli
      %}

      <div class="notification is-warning is-light" style="font-size: 1rem">
        Note that the GitHub repository also includes this documentation, so it’s significantly bigger than the NPM
        package.
      </div>
    </div>
  </div>
</div>