CODEWITHSUNDEEP
twitter-bootstrapvue.jsbootstrap-4bootstrap-vue
MetallicPriest
MetallicPriest

Reputation: 30755

How can I change the width of b-form-select

I am using b-form-select, but by default it uses 100% width. How can I reduce the width? I tried something like that but that doesn't work.

 <b-form-select v-model="xxx" :options="yyy" width: 50%></b-form-select>

Upvotes: 0

Views: 5798

Answers (2)

Dan
Dan

Reputation: 63059

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>

Upvotes: 1

Hiws
Hiws

Reputation: 10324

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/[email protected]/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>

Upvotes: 5

Related Questions