How do I create a layout like this?

[noogui]

I want to create a question and answer layout with four buttons and a question above. I don’t have idea how to leverage Quasar framework to come up with an image as shown in the picture. 1 question on top and four centered buttons with fixed sizes.

This is what I have:

<template>
<q-layout
ref=“layout”
view=“hhh lPr fff”>
<div align=“center” =>
<div class="">
<q-btn color=“secondary” size=“sm” label=""> choice A </q-btn>
<q-btn color=“secondary” size=“sm” label=""> choice B</q-btn>
</div>
<div class="">
<q-btn color=“secondary” size=“sm” label=""> choice C </q-btn>
<q-btn color=“secondary” size=“sm” label=""> choice D</q-btn>
</div>
</div>
</q-layout>
</template>

I’m not a lazy ass. just a frustrated beginner who wants to develop VueJS apps using Quasar

[chbarr]

You must read the documentation about flex (http://quasar-framework.org/components/flex-css.html). After you will build complex layout easily.
See an example:
https://jsfiddle.net/tL0qcfuL/

[donvie]

im not good to with flex