How do I align an image next to some text with Vue + Buefy

Mapler 0
Viewed 30

I want to put an image to the right of my text in Vue with Buefy. Here is my code so far. Could anyone help me?

    <template>
      <section class="hero is-link is-fullheight-with-navbar">
    <div class="hero-body">
      <div class="container is-max-desktop">
        <div class="columns is-vcentered is-variable">
          <div class="column">
            <p class="title">
              Let your creativity go wild
            </p>
            <p class="subtitle">
             Kaplash is your go-to tool to help make your coding and blocky dreams come true.
            </p>
            <b-image
           
 
src="https://media.discordapp.net/attachments/999131353033482322/1017389226138009650/unknown.png"
            ratio="16by9"
            @load="onLoad1"
        ></b-image>
          </div>
        </div>
      </div>
    </div>
      </section>
    </template
bulma vue.js javascript
1 Answers

You just need to add an extra <div> as a wrapper for your image as the code below:

<template>
  <section class="hero is-link is-fullheight-with-navbar">
    <div class="hero-body">
      <div class="container is-max-desktop">
        <div class="columns is-vcentered is-variable">
          <div class="column">
            <p class="title">
              Let your creativity go wild
            </p>
            <p class="subtitle">
              Kaplash is your go-to tool to help make your coding and blocky dreams come true.
            </p>
          </div>
          <!-- This is the div that I added -->
          <div class="column">
            <b-image


                src="https://media.discordapp.net/attachments/999131353033482322/1017389226138009650/unknown.png"
                ratio="16by9"
            ></b-image>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

hamid-davodi0
Related