Bootstrap-vue: How to achieve horizontal form - 2 inputs in-line

[KonradDeskiewicz]

Hi,
I'm looking for a way to declare (without forced row/columns) simple horizontal form:

User [Enter name ] [Enter Surname ] [Send]

Right now if I use <b-form-group :horizontal="true"> and two inputs inside, they appear one above other, not in-line. Is this a bug or I'm missing something here?

PS: Great job anyway - love Bootstrap-vue :)

[tmorehouse]

To create single inline form, try this:

<template>
  <b-form inline @submit="handleSubmit">
    <label class="mr-1">User:</label>
    <b-input class="mr-1" placeholder="name" id="inName"/>
    <b-input class="mr-1" placeholder="Surname" id="inSurname"/>
    <b-btn type="submit">Send</b-btn>
  </b-form>
</template>
<script>
export default {
  methods: {
    handleSubmit(evt) {
      evt.preventDefault();
      // handle your form submission here
    }
  }
}
</script>

[tmorehouse]

p.s. for <b-form-group>, remember that most inputs have the 'form-control' class on them, which makes the input 100% width of its parent container, which is why you see stacking happening inside <b-form-group>.

If you need multiple inputs in a form-group, they need to be wrapped in a b-row and b-col's (and a role="group" on the b-col) to place them side-by-side

The horizontal feature of <b-form-group> moves the label to the left of the form input (by setting column widths (it doesn't make the containing inputs horizontal)

[tmorehouse]

You can also use b-form-row + b-col to make the inputs appear on one line, with tighter "gutters" (less passing compared to regular rows+cols)

<b-form-row>
  <b-col><b-form-input placeholder="Name" /></b-col>
  <b-col><b-form-input placeholder="Surname"/></b-col>
</b-form-row>

OR you can set explicit width classes on hte inputs (such as w-50 which will make it no wider than 50% of the parent container.