Bootstrap styling for .fields_with_errors not working
<p>When the form is submitted and there are errors: I want to have the offending fields highlighted in bootstrap error/alert styling.  Out of the box: Bootstrap does not style the conventional <code>fields_with_errors</code> class that gets applied to the failed-validation fields in rails forms.</p>

<p>In the past <a href="https://stackoverflow.com/questions/21161622/field-with-errors-messes-up-bootstrap-styled-form">per this question</a> I have simply added this:</p>

<pre><code>.field_with_errors {
  @extend .has-error;
}
</code></pre>

<p>And the offending form fields were highlighted with bootstrap error/alert styling as desired.  However, this is not working in my current rails project, and I am not sure what I am missing.</p>

<p>I'm sure I am missing something simple:</p>

<pre><code>#application.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-datepicker3";


.field_with_errors {
  @extend .has-error;
}
</code></pre>

<p><br></p>

<pre><code>#relevant gems in Gemfile

gem 'sass-rails', '~&gt; 5.0'
gem 'bootstrap-sass', '~&gt; 3.3', '&gt;=3.3.6'
gem 'bootstrap-datepicker-rails', '~&gt; 1.6', '&gt;= 1.6.1.1'
</code></pre>

<p><br>
HTML of relevant form fields before submission (both fields fail validations):</p>

<pre><code>&lt;div class="form-group"&gt;
  &lt;label for="expense_duration_start_date"&gt;Start Date&lt;/label&gt;&lt;br&gt;
  &lt;input data-provide="datepicker" type="text" name="expense_duration[start_date]" id="expense_duration_start_date" /&gt;
&lt;/div&gt;

&lt;div class="form-group"&gt;
  &lt;label for="expense_duration_end_date"&gt;End Date&lt;/label&gt;&lt;br&gt;
  &lt;input data-provide="datepicker" type="text" name="expense_duration[end_date]" id="expense_duration_end_date" /&gt;
&lt;/div&gt;
</code></pre>

<p><br>
HTML of form fields after form-submission:</p>

<pre><code>&lt;div class="form-group"&gt;
  &lt;div class="field_with_errors"&gt;&lt;label for="expense_duration_start_date"&gt;Start Date&lt;/label&gt;&lt;/div&gt;&lt;br&gt;
  &lt;div class="field_with_errors"&gt;&lt;input data-provide="datepicker" type="text" name="expense_duration[start_date]" id="expense_duration_start_date" /&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="form-group"&gt;
  &lt;div class="field_with_errors"&gt;&lt;label for="expense_duration_end_date"&gt;End Date&lt;/label&gt;&lt;/div&gt;&lt;br&gt;
  &lt;div class="field_with_errors"&gt;&lt;input data-provide="datepicker" type="text" name="expense_duration[end_date]" id="expense_duration_end_date" /&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So the <code>.field_with_errors</code> class is getting applied, but it is just not being styled, and I do not know why the css of <code>@extend .has-error;</code> is not working.  How do I fix this?</p>