title: Set List Box width to fill column width in Bootstrap
body: <p>I have 3 list boxes as part of my html. I would like <strong>list box to fill the column, so the width of the ListBox will be same as the width of the column</strong>, but I am not able to do so.
  In 'col-md-12', the width of list box should be almost the width of the screen.
  I have tried this:</p>
  
  <ol>
  <li>Set width of the list box "width:100%" on each individual listbox.</li>
  <li>Set width of parent div  "width:100%" on each individual listbox.</li>
  <li>I have also tried to use container-fluid on root div.</li>
  </ol>
  
  <p>but no luck.</p>
  
  <p>I do not want to set the width to static size ('width: 550px').</p>
  
  <pre><code>&lt;div class="form-horizontal container"&gt;
      &lt;hr /&gt;
      &lt;div class="form-group row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;select Class="form-control" multiple="multiple" style="font-size:large"&gt;
                  &lt;option value="1"&gt;Test234&lt;/option&gt;
                  &lt;option value="3"&gt;Test123&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-6"&gt;
              &lt;select Class="form-control" multiple="multiple" style="font-size:large"&gt;
                  &lt;option value="26"&gt;SVC1&lt;/option&gt;
                  &lt;option value="27"&gt;SVC2&lt;/option&gt;
                  &lt;option value="28"&gt;SP1&lt;/option&gt;
                  &lt;option value="29"&gt;PN1&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group row col-md-12"&gt;
          &lt;select Class="form-control" multiple="multiple" name="items" style="font-size:large"&gt;&lt;/select&gt;
      &lt;/div&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Update #1:</strong></p>
  
  <p>As I did not mention in this question that this was a part of MVC view, here is a little hint, which I have blindly overlooked and spend hours trying to fix. 
  Mine solution worked perfectly OK, but when you create new MVC 5 website project in Visual Studio 2013, it creates it's own css file called Site.css. In this file it has line which looks like this:</p>
  
  <pre><code>/* Set width on the form input elements since they're 100% wide by default */
  input, select, textarea
  {
      max-width: 280px;
  }
  </code></pre>
  
  <p>which, whatever you do (in my case pulling my hair), will not let you change width. So after commenting this out, all worked fine.</p>
  
  <p>Hope this will help someone...</p>