CODEWITHSUNDEEP
cssbootstrap-4
margherita pizza
margherita pizza

Reputation: 7145

bootstrap take full width for select drop down

<div align="center" class="form-group">

    <select v-model="subject" class="form-control">
      <option v-for="n in papertypes" class="">{{ n.type }}</option>

    </select>
    <br>

Bootstrap takes the full width for the select drop down by default. I want it to be set to get the width what it requires. How do I achieve this?

Upvotes: 1

Views: 6561

Answers (3)

Abin Thaha
Abin Thaha

Reputation: 4633

You can make it possible by giving width for that specific class like

<div align="center" class="form-group">
  <select v-model="subject" class="form-control">
    <option v-for="n in papertypes">{{ n.type }}</option>
  </select>
</div>


.form-group select.form-control {
  display: inline-block;
  width: 300px;
}

Check the codepen link

Also please notet align attribute is deprecated in HTML5. So if you want to align the content to center. Bootstrap has classes for that. Like text-center in Bootstrap3, we have justify-content-center in Bootstrap4.

Upvotes: 3

Kalleshwar Kalshetty
Kalleshwar Kalshetty

Reputation: 544

you can add "custom-select" class for select.

<div align="center" class="form-group">
<select v-model="subject" class="custom-select">
  <option v-for="n in papertypes" class="">{{ n.type }}</option>
</select>

Upvotes: 0

kiranvj
kiranvj

Reputation: 34107

Add the class w-auto to .form-control

<div align="center" class="form-group">
    <select v-model="subject" class="form-control w-auto">
      <option v-for="n in papertypes" class="">{{ n.type }}</option>
    </select>
    <br>

Upvotes: 1

Related Questions