Tips for displaying validation message beneath horizontal radio buttons in Bootstrap version 4.1.3

I am struggling to display a validation message horizontally aligned below radio buttons in Bootstrap 4.1.3. Below is the standard rendering:

https://i.sstatic.net/8Qwo9.png

<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>

After attempting to add a line break with <br>, the result was as follows:

https://i.sstatic.net/WwV2p.png

<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>

My goal is to have the validation message directly under the two horizontal radio buttons. I am utilizing Bootstrap 4.1.3's validation feature for convenience, but I'm struggling with this specific aspect. Any help would be greatly appreciated. Thank you!

htmlcssvalidationbootstrap-4

Answer №1

Dealing with the same issue recently, I found a solution that may be beneficial for others even if it's too late for you. The reason for the validation message being displayed in an inconvenient location is due to Bootstrap's addition of display: inline-flex; on a parent element when showing horizontal forms, preventing it from wrapping to the next line.

To tackle this problem, I managed to relocate the invalid-feedback validation message outside the flex layout element, while still maintaining its responsiveness to validation triggers (no need for additional JavaScript) by placing a hidden radio button with identical names before it. It might not be the most elegant solution, but it gets the job done.

<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 have designed a form utilizing only Bootstrap 4 classes. Feel free to utilize this code snippet for achieving your desired outcome.

<div class="container">
  <form >
   <div class="col-sm-6">
   Kindly verify 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>

Instead of the following code:

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

You can use the code below for displaying error messages in a more visually appealing manner:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to navigate from the current node to its parent node using xpath?

I am currently working with an xpath that is based on class, and I am attempting to locate the parent element of it from the current position. Path 1 /html/body/div[2]/div[2]/div/div[2]/div/div[2]/div[2]/div[1]/div/div/p[8]/b[2]/a Path 2 /html/body/div[2 ...

pythonhtmlseleniumxpathweb-scraping

What is preventing this brief code from functioning properly? I am trying to extract a value from an input field and add it to a div element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="//ajax.googleapis.com/ajax/libs/jque ...

javascriptjqueryhtml

Seeking resolution for slight CSS issue in VueJS drag and drop functionality

I've been working on a VueJS project that requires a drag & drop + nestable feature, as illustrated below. I have made significant progress, but I am struggling with a recursive function issue. Could anyone help me troubleshoot this? A JSFiddle link ...

jquerycssvue.jsvuejs2

What is the process for adding content into a specified JSX Component in React?

I’ve been attempting to develop a JSXComponent with additional features that will result in a JSX element being returned as the parent. Here is what I am aiming for: <JSXComponent someProp="value"> {({data, loading, error})} => ( <div ...

htmlreactjsjsx

Is there a way to enlarge all web page elements simultaneously without causing displacement?

Essentially, I am attempting to replicate the functionality that Twitter has on their webpage when you use CTRL+ to zoom in or increase the size of the web page. http://twitter.com/ Currently, I am experiencing displacement of elements upon zoom in and h ...

htmlcss

What can I do to ensure that this nested footer stays fixed to the bottom of the page?

I've been experimenting with different approaches, but I'm struggling to find a solution for making the footer stay at the bottom of the page. The challenge arises from having multiple nested divs within each other. My goal is to have the border- ...

csssticky-footerborderhtml

VueJs causing Bootstrap Progress Bar to be Invisible in Browser

In my project using Vue2 (webpack-simple), I am attempting to incorporate a Bootstrap progress bar into a component. Even though the progress bar is displaying in the component, it lacks the visual progression indicated by aria-valuenow. I have included a ...

vuejs2bootstrap-4progress-barvue-component

Troubleshooting Angular 4's ng-selected functionality

I'm currently facing an issue with getting ng-selected to function properly. Initially, I attempted to simply add selected in the option tag, but later discovered that I should be using ng-select. Despite trying variations such as ng-selected="true" a ...

htmlangular

What is the best way to prevent the table from being added again once it has been displayed?

I'm faced with the task of displaying an HTML table in a popup window when a button is clicked, using Bootstrap modal functionality. This scenario is similar to a preview function where user input is displayed in a table when a preview button is click ...

javascripthtml

Why does the font on my website appear altered compared to the font in the ttf/woff files?

This is an example of the font's appearance. Here's how the font appears in the .ttf file format. And this is the visual representation of the font on my website. #top { margin: 30px 30px 0px 150px; border: ...

cssfont-face

Creating a Fixed Footer with CSS

Another question on the same topic, with a twist. Despite trying various solutions found in countless articles, none seem to work for me. My familiarity with HTML/CSS is limited due to just a few months of off-and-on practice. Hence, I'm seeking help ...

css

Can someone help me figure out how to determine which specific element from a CSS file is being utilized in the corresponding HTML

Imagine a situation. You have received a full HTML code from a friend. Within this code, there are several third-party CSS packages included. For example, let's consider animate.css. By looking at the link markup provided below, you can easily ident ...

htmlcss

Tips on replacing views within ion-view and updating the title in the title bar to match the injected page through the use of Ionic and AngularJS

I am new to ionic and angular JS. I am currently working on a simple app within the ionic framework. My goal is to inject an HTML template into the ion-view tag using ngRoute. However, I am facing issues as my code is not successfully injecting the HTML te ...

htmlangularjsionic-framework

Does setting white-space:nowrap enlarge the div?

My CSS code for div .name sets the width to 75% to truncate text if it doesn't fit. However, resizing the window causes the text to remain the same size and my entire website structure falls apart. This is the HTML code snippet: <tr> <t ...

htmlcss

The group management options are mysteriously missing from Django's admin page

After deploying a Django web app, I encountered issues accessing the admin page. I expected to see the interface for adding or removing users from a specific group, but it was not displaying as expected. https://i.sstatic.net/5bfUy.png Upon inspecting th ...

pythonjquerydjangobootstrap-4

The JavaScript-generated form element will not be included in the data submitted through the POST method

While it may appear that this question has been asked before, my specific inquiry seems to be unique as I have not found a similar answer in other threads. Therefore, I am initiating a new discussion. My issue revolves around a form which contains a link ...

javascriptjqueryhtmlforms

Ways to access the content of the chosen <td> element using Vue?

I have a dynamic table where I retrieve data using $.ajax() from a database. The content in the rows is editable, and I need to save the changes made with vue.js. After updating the content, an $.ajax() function with 4 parameters (name, client_id, url, and ...

javascriptjqueryhtmlvue.js

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

javascriptjqueryhtmlcss

Is it advisable to set the html root at 62.5% when using rem units in CSS? Does this imply that the default font size of browsers is 16px?

During a discussion with a group, I mentioned the 62.5% trick for scalability (setting 62.5% as font size in root and using rem units throughout CSS for easier scalability when users change default browser font size) and their arguments were as follows: " ...

htmlcssresponsive-design

Minimize the expansive width of Shiny Dashboard's sidebar for

I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...

htmlcssrshinyshinydashboard