there are a lot of ways of using Bulma. In this case, we'll only need their styles, in other words, their css main file. To get it, we'll visit Bulma CSS main page and download their pack.

Open the package, we'll go into the 'css' folder, get their main.css Bulma file and paste it into our css folder in our project.

Now, go and add these lines to your block on your Vue component:

<template>
  <div>
    <!-- BULMA TEST -->
    <div class="columns">
      <div class="column is-12">
        <h1 class="has-text-info title is-1">
          This is a Bulma test!
        </h1>
        <h4 class="has-text-info subtitle has-text-success">
          Hello, this is Bulma: I'm easier than Bootstrap!
        </h4>
          <button class="button is-primary">
            A primary button.
          </button>
          <button class="button is-link">
            A link button.
          </button>
          <button class="button is-danger">
            A danger button.
          </button>
      </div>
    </div>
    <!-- /BULMA TEST -->
  </div>
</template>

Our next step is adding our Bulma css file path into our <style> block, like this:

<style>
/** Importing our Bulma css file **/
@import url("../css/main.css");
</style>

For our purpose, it is!

With these few steps, you'll be ready to use Bulma CSS in a quick way into your project. Remember that the Bulma project pack you download from their page gives you plenty of options, including using their SASS files for you to edit the styles. As it is modular, you can use their styles or just the grid they offer in their system.

Now,