How to show validation message below horizontal radio buttons in Bootstrap 4.1.3?

Question

I am trying to show validation message below horizontally aligned radio buttons in Bootstrap 4.1.3. Below is the default render:

<hr>
<div class="">
  <div class="col-sm text-center">
    Please confirm that your eye color is:<br>
    <span class="response" id="eye_color"></span>
  </div>
  <div class="col-sm text-center">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
      <label class="form-check-label" for="eye_color_yes">Yes</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
      <label class="form-check-label" for="eye_color_no">No</label>
      <div class="invalid-feedback">
        Please select an option.
      </div>
    </div>
  </div>
</div>
<hr>

I tried adding a break <br> and got this:

<hr>
<div class="">
  <div class="col-sm text-center">
    Please confirm that your eye color is:<br>
    <span class="response" id="eye_color"></span>
  </div>
  <div class="col-sm text-center">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
      <label class="form-check-label" for="eye_color_yes">Yes</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
      <label class="form-check-label" for="eye_color_no">No</label>
      <div class="invalid-feedback">
        <br>Please select an option.
      </div>
    </div>
  </div>
</div>
<hr>

But what I would really like is for the validation message to appear directly under the two horizontal radio buttons. I am using Bootstrap 4.1.3's validation for ease but for some reason can't figure this part out. Thanks!

Answer 1

I was just struggling with the same thing. This answer is probably too late for you, but hopefully it helps someone else. The validation message is displaying where it is because Bootstrap adds display: inline-flex; on a parent element when displaying horizontal forms, preventing it from dropping down to the next line.

I was able to relocate the invalid-feedback validation message outside the flex layout element, and have it continue to react to the validation (without any extra javascript) by placing a dummy radio button with the same name before it and hiding it with CSS. A bit hacky, but it works.

<div class="col-sm text-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
    <label class="form-check-label" for="eye_color_yes">Yes</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
    <label class="form-check-label" for="eye_color_no">No</label>
  </div>
  <input type="radio" name="eye_color" style="display:none;" required>
  <div class="invalid-feedback">
    Please select an option.
  </div>
</div>

Answer 2

I created a form only using Bootstrap 4 class. You can use this snippet for your desired result.

<div class="container">
  <form >
   <div class="col-sm-6">
   Please confirm that your eye color is:
   </div>
    <div class="form-check-inline">
      <label class="form-check-label" for="radio1">
        <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Blue
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label" for="radio2">
        <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Black
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input">Grey
      </label>
    </div>
    <div class="text-danger">
     Please select color.
  </div>
    
  </form>
</div>

On the place of below code:

<div class="text-danger">
     Please select color.
  </div>

You can use below snippet it will look better for showing error messages:

<div class="alert alert-danger">
    <strong>Warning!</strong> Please select color.
  </div>