[Vuejs]-How can I change the width of b-form-select

by

4👍

✅

You can apply CSS using style or class.
Also, width: 50% isn’t valid HTML, I assume you meant width="50%", which wont work on a <select>

Styles

<b-form-select style="width: 50%"></b-form-select>

Class

<b-form-select class="w-50"></b-form-select>

new Vue({
  el: "#app"
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app" class="p-3">
  <b-form-select style="width: 50%"></b-form-select>
  <hr />
  <b-form-select class="w-50"></b-form-select>
</div>
👤Hiws

1👍

Bootstrap-Vue uses a 12-column layout system. Use <b-row> and <b-col> with the cols attribute. In this case, you want 6 cols, i.e. half of 12:

<b-row>
  <b-col cols="6">
    <b-form-select v-model="xxx" :options="yyy"></b-form-select>
  </b-col> 
</b-row>

Using cols allows for dynamic sizes based on screen width. For example, if you wanted to take up the full width on mobile but half on every other screen size, you can do it:

<b-row>
  <b-col cols="12" sm="6">
    <b-form-select v-model="xxx" :options="yyy"></b-form-select>
  </b-col> 
</b-row>
👤Dan

Leave a comment