Layout in bootstrap-vue for label input on different rows

Question

Working with bootstrap I use next code when I need to change layout of label/input depending on device :

<fieldset class="bordered text-muted p-0 m-0 mb-4">
    <legend class="bordered">Filters</legend>

    <dl class="block_2columns_md m-0 p-2">
        <dt class="key_values_rows_label_13">
            <label class="col-form-label" for="filter_title">
                By title
            </label>
        </dt>
        <dd class="key_values_rows_value_13">
            <input style="flex: 1 0" name="filter_title" id="filter_title" class="form-control" type="text" value="" v-model="filter_title">
        </dd>
    </dl>

and changing in block_2columns_md flex-direction depending on device I put on small devices label input on different rows. Now I work with bootstrap-vue and wonder whicj elements bootstrap-vue have for such blocks, as I suppose using of bootstrap-vue is prefered if I use bootstrap-vue ...

"bootstrap-vue": "^2.3.0",

Thanks!

score 3 · Accepted Answer · edited Feb 15 '20 at 05:39

Sounds like what you want is the Form Group component. More specifically the Horizontal Layout portion of it.

The component has label-cols-{breakpoint} props to define how much space the label should use at a given breakpoint. It uses the same 12 grid system as normal bootstrap uses.

So if you want the label to use the entire row (be above the input) at a certain breakpoint, add label-cols-{breakpoint}="12" to the form-group.

The snippet has the label above on small mobile devices, and on sm and above it's beside the input.

new Vue({
  el: '#app'
})

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form-group label-cols="12" label-cols-sm="2" label="Default">
    <b-input></b-input>
  </b-form-group>
</div>

Layout in bootstrap-vue for label input on different rows

1 Answers1