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

Question

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

Where is the code for the image? Please update your code to include what you have tried to accomplish this. — disinfor, Sep 08 '22 at 13:02
Does this answer your question? [CSS Float: Floating an image to the left of the text](https://stackoverflow.com/questions/5198392/css-float-floating-an-image-to-the-left-of-the-text) — DnD2k21, Sep 08 '22 at 13:07
@Mapler this really doesn't have anything to do with JS. This is a CSS question. The only part that has JS is how you are rendering your component. The rest is CSS question. However, what you should do is put your image component in its own `column` after the column with your `p` tags. I'm not sure what the `columns` class has by default for CSS - but if it is `display: flex` then your image should render next to the text. Also, not sure, but shouldn't `b-image` be `b-img`? — disinfor, Sep 08 '22 at 13:11

score 1 · Accepted Answer · answered Sep 08 '22 at 14:28

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>

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

1 Answers1