Bootstrap - Full Width Layout
<p>I have an app that uses Bootstrap. In this app, I have a list of items that I can reorder. Currently, my list looks like this:</p>

<pre><code>&lt;div class="col-xs-12"&gt;
&lt;ul id="choices" class="list-unstyled"&gt;
  &lt;li&gt;
    &lt;i class="fa fa-reorder"&gt;&lt;/i&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="text" class="form-control col-md-8"&gt;
    &lt;/div&gt;
    &lt;i class="fa fa-times-circle"&gt;&lt;/i&gt;
  &lt;/li&gt;

  &lt;li&gt;
    &lt;i class="fa fa-reorder"&gt;&lt;/i&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="text" class="form-control col-md-8"&gt;
    &lt;/div&gt;
    &lt;i class="fa fa-times-circle"&gt;&lt;/i&gt;
  &lt;/li&gt;

  &lt;li&gt;
    &lt;i class="fa fa-reorder"&gt;&lt;/i&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="text" class="form-control col-md-8"&gt;
    &lt;/div&gt;
    &lt;i class="fa fa-times-circle"&gt;&lt;/i&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>I'm trying to make this list such that each item fills the entire width of the entire space. In other words, I want it to looks like this:</p>

<p>div</p>

<pre><code>+---------------------------------------------------------------------------+
|                                                                           |
| = _____________________________________________________________________ x |
| = _____________________________________________________________________ x |
| = _____________________________________________________________________ x |
|                                                                           |
+---------------------------------------------------------------------------+
</code></pre>

<p>At the moment, when I do this, I get the <code>input</code> field on a different line and I can't get each list item to fill the available space. What am I missing?</p>