0ct0pu5
/
bulma


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
							---
title: Get started with Bulma
layout: documentation
doc-tab: overview
doc-subtab: start
---

{% include subnav-overview.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Getting started</h1>
    <h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>

    <hr>

    <div class="content">
      <p>
        There are several ways to <strong>get started</strong> with Bulma. You can either:
      </p>
      <ol>
        <li>
          use <strong>npm</strong> to install the Bulma package
        </li>
        <li>
          use the cdnjs <strong>CDN</strong> to link to the Bulma stylesheet
        </li>
        <li>
          use the <strong>GitHub repository</strong> to get the latest development version
        </li>
      </ol>
    </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 <strong>NPM</strong> <em>(recommended)</em>:
        </p>
        {% highlight bash %}npm install bulma{% 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">
          Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
          <br>
          <a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
        </p>
      </div>
    </article>

    <article class="media is-large">
      <div class="media-left">
        <p class="title is-5">3</p>
      </div>
      <div class="media-content">
        <p class="title is-5">
          Download from the <strong>repository</strong>
          <br>
          <a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
        </p>
      </div>
    </article>

    <hr>

    <div class="message is-info">
      <div class="message-header">
        Font Awesome icons
      </div>
      <div class="message-body">
        <p>If you want to use icons with Bulma, don't forget to include <a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>:</p>
        {% highlight html %}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">{% endhighlight %}
      </div>
    </div>

    {% include 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 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 highlight-full">
      {% highlight html %}{% include getting-started.html %}{% endhighlight %}
    </div>

  </div>
</section>