title: How to make bootstrap form-inline Horizontal scrollable
body: <p>My form is way too large I want to make it <code>scrollable</code> without breaking line. How can I do this? </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="item_group"&gt;
     &lt;div class="form-group form-md-line-input" style=""&gt;
        &lt;label&gt;Item&lt;/label&gt;
        &lt;select class="form-control " data-live-search="true" name="" id="" style=""&gt;
           &lt;option&gt;Select Item&lt;/option&gt;
           &lt;option value="23"&gt;Styler King 6 Card Holder  (Set of 1, Khaki)&lt;/option&gt;
        &lt;/select&gt;
     &lt;/div&gt;
     &lt;div class="form-group form-md-line-input" style=""&gt;
        &lt;label&gt;Unit&lt;/label&gt;
        &lt;select class="form-control " data-live-search="true" name="" id="" style=""&gt;
           &lt;option&gt;Select Unit&lt;/option&gt;
           &lt;option value="1"&gt;Piece&lt;/option&gt;
           &lt;option value="2"&gt;Box&lt;/option&gt;
           &lt;option value="4"&gt;Sub Box&lt;/option&gt;
        &lt;/select&gt;
     &lt;/div&gt;
     &lt;div class="form-group form-md-line-input"&gt;
        &lt;input type="number" class="form-control" id="form_control_1" name="" style="" value="0"&gt;
        &lt;label for="form_control_1"&gt;Quantity&lt;/label&gt;
     &lt;/div&gt;
     &lt;div class="form-group form-md-line-input"&gt;
        &lt;input type="number" class="form-control" id="form_control_1" name="" style="" value="0"&gt;
        &lt;label for="form_control_1"&gt;Sale Rate&lt;/label&gt;
     &lt;/div&gt;
     &lt;div class="form-group form-md-line-input"&gt;
        &lt;input type="number" class="form-control" id="form_control_1" name="" style="" value="0"&gt;
        &lt;label for="form_control_1"&gt;Discount&lt;/label&gt;
     &lt;/div&gt;
     &lt;div class="form-group form-md-line-input"&gt;
        &lt;input type="number" class="form-control" id="form_control_1" name="" style="" value="0"&gt;
        &lt;label for="form_control_1"&gt;CGST&lt;/label&gt;
     &lt;/div&gt;
     &lt;div class="form-group form-md-line-input"&gt;
        &lt;input type="number" class="form-control" id="form_control_1" name="" style="" value="0"&gt;
        &lt;label for="form_control_1"&gt;SGST&lt;/label&gt;
     &lt;/div&gt;
     &lt;div class="form-group form-md-line-input"&gt;
        &lt;input type="number" class="form-control" id="form_control_1" name="" style="" value="0"&gt;
        &lt;label for="form_control_1"&gt;IGST&lt;/label&gt;
     &lt;/div&gt;
     &lt;div class="form-group form-md-line-input"&gt;
        &lt;input type="number" class="form-control" id="form_control_1" name="" style="" value="0"&gt;
        &lt;label for="form_control_1"&gt;Net Rate&lt;/label&gt;
     &lt;/div&gt;
     &lt;div class="form-group form-md-line-input"&gt;
        &lt;input type="number" class="form-control" id="form_control_1" name="" style="" value="0"&gt;
        &lt;label for="form_control_1"&gt;Net Amount&lt;/label&gt;
     &lt;/div&gt;
     &lt;input type="hidden" value="1" id="total_item"&gt; 
     &lt;div class="col-md-12" style="padding-left: 0px; padding-right: 0px"&gt;
        &lt;div class="form-actions noborder"&gt;
           &lt;button class="btn blue" style="width: 100%;" onclick="addnewitem()"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;Add New Item&lt;/button&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>URL:</strong></p>
  
  <p><a href="http://vsss.co.in/Admin/index.php/Sales" rel="nofollow noreferrer">http://vsss.co.in/Admin/index.php/Sales</a></p>
  
  <p><strong>Inline Form Image</strong></p>
  
  <p><a href="https://i.stack.imgur.com/7HeBz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7HeBz.png" alt="enter image description here"></a></p>