bulma/docs/documentation/overview/start.html

---
title: Getting started with Bulma
layout: documentation
doc-tab: overview
doc-subtab: start
breadcrumb:
- home
- documentation
- overview
- overview-start
---

<div class="content">
  <p>
    Bulma is a <strong>CSS library</strong>. This means it provides CSS classes to help you style your HTML code.
    <br>
    To use Bulma, you can either use the pre-compiled <code>.css</code> file or install the <code>.sass</code> files so you can customize it to your needs.
  </p>
</div>

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

      <div class="media-content">
        <p class="title is-4">Get the Bulma <strong class="has-text-link">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>

      {% 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 %}

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

      <p class="block">
        The <strong>RTL version</strong> is also available:
      </p>

      {% 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 %}

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

      <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">
    <div class="block media is-align-items-center">
      <div class="media-left">
        <span class="icon is-flex is-large has-text-sass">
          <i class="fab fa-sass fa-2x"></i>
        </span>
      </div>

      <div class="media-content">
        <p class="title is-4">Get the Bulma <strong class="has-text-sass">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 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 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="message is-warning">
        <div class="message-body">
          Note that the GitHub repository also includes this documentation, so it’s significantly bigger than the NPM package.
        </div>
      </div>
    </div>
  </div>
</div>

{% include elements/anchor.html name="Code requirements" %}

<div class="content">
  <p>
    For Bulma to work correctly, you need to make your webpage <strong>responsive</strong>.
  </p>
</div>

<article class="media is-large">
  <div class="media-left">
    <p class="title is-5">1</p>
  </div>
  <div class="media-content">
    <p class="title is-5">
      Use the <strong>HTML5 doctype</strong>
    </p>
    {% highlight html %}<!DOCTYPE html>{% endhighlight %}
  </div>
</article>

<article class="media is-large">
  <div class="media-left">
    <p class="title is-5">2</p>
  </div>
  <div class="media-content">
    <p class="title is-5">
      Add the responsive <strong>viewport</strong> meta tag
    </p>
    {% highlight html %}<meta name="viewport" content="width=device-width, initial-scale=1">{% endhighlight %}
  </div>
</article>

{% include elements/anchor.html name="Starter template" %}

<div class="content">
  <p>
    If you want to get started <strong>right away</strong>, you can use this <strong>HTML starter template</strong>. Just copy/paste this code in a file and save it on your computer.
  </p>
</div>

<div class="bd-example bd-highlight-full">
  {% highlight html %}{% include snippets/getting-started.html %}{% endhighlight %}
</div>

{% include elements/anchor.html name="bulma-start" %}

<div class="content">
  <p>
    <code><a href="{{ site.url }}/bulma-start/">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> dependencies you need to build your own website with Bulma.
  </p>
  <p>
    <a class="button is-link" href="{{ site.url }}/bulma-start/">Check it out</a>
  </p>
</div>