title: Override bootstrap with class and simple_forms
body: <p>I have the following CSS class:</p>
  
  <pre><code>.table-price-item {
    vertical-align: middle;
    margin-bottom: 10px;
    font-size: 0.875em;
    padding-right: 5px;
  }
  </code></pre>
  
  <p>And the following input in simple_forms:</p>
  
  <pre><code>  &lt;%= f.input :price, :input_html =&gt; { :class =&gt; "table-price-item" }, 
      :label =&gt; false, :as =&gt; :string, :readonly =&gt; true %&gt;
  </code></pre>
  
  <p>When the form renders I get this</p>
  
  <pre><code>&lt;input class="string optional readonly table-price-item" ...
  </code></pre>
  
  <p>The table-price-item doesn't get applied because it's overridden with this:</p>
  
  <pre><code>textarea, input[type="text"], input[type="password"], input[type="datetime"], 
  input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], 
  input[type="week"], input[type="number"], input[type="email"], input[type="url"], 
  input[type="search"], input[type="tel"], input[type="color"], .uneditable-input 
  </code></pre>
  
  <p>from bootstrap.  How can I get it to override that last one?</p>
  
  <p>BTW the table-price-item is also applied to select2 and other items on that form.</p>
  
  <p>Order in which css are linked:</p>
  
  <pre><code>&lt;link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/select2.css?body=1" media="screen" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" /&gt;
  </code></pre>