---
title: Overview of Bulma
layout: docs
theme: start
doc-tab: start
doc-subtab: overview
breadcrumb:
- home
- documentation
- start
- start-overview
---
<div class="content">
  <p>Bulma is a <strong>CSS library</strong>. This means it provides CSS classes to help you style your HTML code.</p>
  <p>To use Bulma, you can either:</p>
  <ul>
    <li>use one of the pre-compiled <code>.css</code> files</li>
    <li>or install the <code>.scss</code> files so you can customize Bulma to your needs</li>
  </ul>
</div>

{% include docs/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 docs/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 docs/snippets/getting-started.html -%}
  {%- endhighlight %}
</div>
