0
217
ViewsHow to display checkbox at the same line with cols in vuejs and bootstrap
I am creating a form with VueJS and bootstrap. I have created a b-row that includes three cols, one for full name, secondly for Address and last a checkbox. But their cols should to display at the same line and secondly cols should to be full width 50% not separate from others. I am sharing my code also my screenshot.
<b-form class="mt-3">
<b-row>
<b-col cols="6">
<b-form-group id="name" label="Full Name" label-for="name">
<b-form-input
id="name"
type="text"
placeholder="John Gonzales"
v-model="user.name"
></b-form-input>
</b-form-group>
</b-col>
<b-col cols="4">
<b-form-group id="address" label="Address" label-for="Address">
<b-form-input id="" type="text" v-model="user.address" placeholder="Reter 43">
</b-form-input>
</b-form-group>
</b-col>
<b-col cols="2">
<b-form-checkbox
id="checkbox-1"
v-model="status"
name="checkbox-1"
value="accepted"
unchecked-value="not_accepted">
Use Google Location
</b-form-checkbox>
</b-col>
</b-row>
</b-form >
Note: As you can see I have set in secondly col cols-4 to occupation space for checkbox but it isn't the right choice, I also used flex end for checkbox but doesn't work. My finally result should to be exactly by figma:
Do you know any best practice how to display at the same line side by side.
Thanks in Advance.
·
Juan Pablo Isaza
Answer question