Change Width of Select Tag in Twitter Bootstrap

Change width of select tag in Twitter Bootstrap

This works for me to reduce select tag's width;

<select id ="Select1" class="input-small">

You can use any one of these classes;

class="input-small"

class="input-medium"

class="input-large"

class="input-xlarge"

class="input-xxlarge"

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

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>

Bootstrap select width, content too wide when resizing window

Option 1: You can add width:auto to the select, although then it will always size to fit the longest content, and ignore your col class. See the snippet:

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>

<div class="well">

<div class="form-group">

    <label class="col-xs-3 control-label"><strong>4.</strong> Select thing</label>

    <div class="col-xs-2">

        <select class="form-control" style="width:auto;">

            <option>Short

            </option>

            <option>Medium lenght

            </option>

            <option>Much much much longer text not fitting when resizing

            </option>

        </select>

    </div>

</div>

</div>

</form>

Bootstrap-Select width in form

I was able to get it to work once I straightened out some external dependencies. One thing to pay attention to is the versions required. JQuery 1.8.0+ and bootstrap version 4 didn't work for me. I was able to get it to work with 3.3.6.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script data-require="jquery@1.10.0" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" />
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>
  </head>

  <body class="container">

      <div class="form-group">
        <label for="test0">test</label>
        <input id="test0" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <label for="test1">drop down</label>
        <select id="test1" class="form-control" type="text">
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
          </select>
      </div>
      <div class="form-group">
        <label >test 1</label>
        <select id="test2" class="selectpicker form-control" multiple>
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
        </select>
      </div>
  </body>

</html>

Check out the Plunker example

Adjusting the width of the select drop button in bootstrap

Well, if you are using Bootstrap, the class .form-control by default has the following properties:

.form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

So, if you are using bootstrap you will have to override it using a custom class/id, or set a parent with a fixed width.

HTML

<div class="form-container">
    <select class="form control">
        <option value= "1">one</option>
        <option value= "2">two</option>
        <option value= "3">three</option>
    </select>
</div>

CSS

.form-container{
    width: 30%; //or width: 200px, etc
}

How to align (width wise) bootstrap select dropdown with input box?

Bootstrap has a few options for setting the width of an element depending on screen size http://getbootstrap.com/css/#grid-options. changing the gird to use the xs option in you fiddle gets the result you want.

https://jsfiddle.net/5L30q27f/9/

Change Width of Select Tag in Twitter Bootstrap