Force to show invalid-feedback in Bootstrap 4 : <p>Let's say I have HTML like this:</p>

<pre><code>...
&lt;div class="form-group"&gt;
    &lt;div class="form-check"&gt;
        &lt;input class="form-check-input" type="checkbox" id="invalidCheck"&gt;
        &lt;label class="form-check-label" for="invalidCheck"&gt;
            Agree to something
        &lt;/label&gt;
    &lt;/div&gt;

    &lt;div class="invalid-feedback"&gt;
        I am outside of `form-check`!
    &lt;/div&gt;
&lt;/div&gt;
...
</code></pre>

<p>I want to <strong>force</strong> to show the <code>&lt;div class="invalid-feedback"&gt;...</code> without using JavaScript (want to use Bootstrap CSS only). And I know I can use CSS classes like <code>was-validated</code> or <code>is-invalid</code>, but <code>invalid-feedback</code> is outside of <code>form-check</code>. Is there an easy and simple way to show <code>invalid-feedback</code> by adding Bootstrap related CSS classes?</p>

<p>I found one solution:</p>

<pre><code>&lt;div class="invalid-feedback d-block"&gt;
    Now I am visible!
&lt;/div&gt;
</code></pre>

<p>But I feel like it's a hacky solution.  Please advise!</p>
