The invalid-feedback component in Bootstrap 4.0 fails to display

I am currently facing an issue with displaying the invalid-feedback text using Bootstrap 4.0 (non-beta) validation.

<div class="form-row">
  <label class="form-control-label">Name:</label>
  <div class="col-4">
    <input class="form-control is-invalid" min="0" type="number"/>
  </div>
    <div class="col-4">
    <div class="invalid-feedback">
    Invalid Feedback Text
    </div>
  </div>
</div>

The issue arises because the "Invalid Feedback Text" is not being displayed in this example.

This problem exists because the invalid-feedback div is not directly next to the input control.

This was a known issue in the alpha/beta versions, but I believed it was resolved in the 4.0 release as indicated by the closed ticket.

How can I incorporate bootstrap validation if the feedback text cannot be placed directly after the input control? This arrangement is not practical for my application.

You can find a demonstration on this fiddle: https://jsfiddle.net/zygrsrox/

csstwitter-bootstrapbootstrap-4

Answer №1

Correct, the idea is that the input should be a sibling of the feedback message. To make the invalid-feedback display, you can utilize a class like d-block or create a custom CSS selector. Consider adding d-block dynamically in your application during validation.

<div class="form-row">
  <label class="form-control-label">Full Name:</label>
  <div class="col-4">
    <input class="form-control is-invalid" min="0" type="number"/>
  </div>
  <div class="col-4">
    <div class="invalid-feedback d-block">
    Invalid Feedback Message Here
    </div>
  </div>
</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

Expanding the axes using Google Charts

Seeking to Expand Y-Axis I am attempting to stretch the Y-axis so that it counts up to 300 instead of just 100. The issue arises when I adjust the Y-axis to reach 300, as the values remain in the same position as they did when counting to 100. Fo ...

htmlcssgoogle-visualization

Are there limitations on column width and count in CSS3?

While exploring the URL http://www.w3.org/TR/css3-multicol/, I noticed that it only allows you to specify either 'column-width' or 'column-count', and sometimes both using 'columns'. However, it lacks options to set minimum wi ...

htmlcss

conceal menu upon click (gradually disappear)

This is a basic HTML/CSS menu. Currently, it is functioning properly for page redirection (href). However, I would like it to hide after being clicked on. I plan to call a function that will initiate an AJAX request upon clicking. Here is the code on JS ...

javascripthtmlcss

Sending a parameter to an attribute

Enlightened. Fresh post with a comprehensive backstory for understanding the objective. A game concept is in progress where participants select two characters for a duel. Each 'character' is considered an object, initially assigned a boolean pro ...

javascriptjquerytwitter-bootstrap

Footer displaying strange behavior

I am working on creating a static web page within a larger Laravel project. Everything is functioning properly except for the footer which is displaying unusually. Despite being positioned at the bottom of the HTML structure, it is taking up more space and ...

htmlcss

Gradually appear with jQuery while maintaining current position

Exploring Display Options In my current setup, I have text that initially has a display:none property, and jQuery is applied to fadeIn() the content. The challenge lies in the fact that since the text is centered, as each word appears, the positioning on ...

javascriptjquerycss

Styling targeted to a particular div

Currently, I am attempting to showcase a docx file on my webpage by converting it to HTML and then displaying it. However, this method generates CSS with rules that end up impacting the entire document. For instance, it changes all links to blue which co ...

htmlcss

How can I stop all videos in the carousel from playing simultaneously?

UPDATE: I have switched to using rows and columns of videos on my website for easier management. However, if anyone has a solution to the following issue, I would appreciate it :) I've been exploring Bootstrap for website design and have implemented ...

javascriptjqueryvideobootstrap-4carousel

Why aren't jQuery change event handlers triggering on Bootstrap radio buttons?

My Bootstrap radio buttons are not triggering the jQuery change event handlers. How can I fix this issue? Please note that I specifically do not want to add event handlers to input or input[type=radio], but rather by using ID selectors. Here is a link to ...

javascriptjquerytwitter-bootstrapbootstrap-4

Can you tell me the proper term for the element that allows CSS properties to be changed after a link has been clicked?

I have integrated a horizontal scrolling date selector on my website, and it is functioning well. However, I am facing an issue while trying to change the CSS properties of a clicked date link using jQuery. Despite successfully firing the click event, I am ...

javascriptjqueryhtmlcss

Issue with background image not resizing or repeating correctly on mobile devices

My website header is not scaling properly on mobile devices, causing some issues. The background color with white text using Bootstrap and custom CSS is not extending across the screen on smartphones or when viewed in Chrome Dev Tools. As a result, two ma ...

htmlcsstwitter-bootstrap

Ways to add extra dots to your listing style

Is there a CSS property or list style that can display an expanding list? For example: Order now for a discount! <ol style="list-style: none"> <li>* Available only for the first 12 months</li> <li>** Only for new customers ...

htmlcss

Aligning a child div within a parent div by using absolute positioning for both

When creating my components dynamically using JS, I utilize position: absolute for both the parent and children elements to achieve the desired placement. But I've encountered an issue with centering a div within another div. Most solutions suggest m ...

javascriptcss

How can you use Jquery to hide an element when clicking on a DIV?

I'm currently developing a JavaScript with jQuery script that displays a div block when the countdown timer reaches zero. Check out my code snippet: <HTML> <HEAD> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> ...

javascriptjqueryhtmlcss

Spacing between a pair of jQuery datepicker panels

https://i.sstatic.net/Xnbh1.png Is there any way to add spacing between two tables inside the jquery date picker with a common header? I've tried various solutions like adding padding to the parent div, but haven't been able to fix it. Can anyon ...

htmlcssdatepicker

What is the deal with this boundary?

Recently, I was experimenting with CSS borders and came up with this interesting result: border-style: double dashed dashed solid; I am curious to understand why it produces such an effect. Adjusting the border-width seems to have unexpected consequences ...

css

Unusual HTML glitch interrupting CSS and JS file inclusion

Check out the issue I'm facing by clicking on this link: I've meticulously coded everything, but for some reason my CSS file and jQuery file are not being included. This is really confusing me because I've been programming for a while now. ...

htmlcssincludefirebug

Tips for adjusting this CSS to be compatible with Internet Explorer

This CSS code I have was created specifically for Firefox compatibility. /* Green header */ .container { background: linear-gradient(#5FA309, #3B8018); position: relative; display: inline-block; padding: 0 20px 0 10px; width: 270px; ...

css

Transform RGB values to the nearest valid CSS3 color name

I'm trying to convert an RGB value received using JavaScript to the closest valid CSS3 color name. While I found a Python solution, I'm struggling to translate it into JavaScript. The purpose behind this conversion is to restrict the number of p ...

javascriptcsscolorsrgb

What could be causing my HTML homepage to not be connected to my CSS file?

I have been researching this issue and none of the solutions I found have worked for me. My HTML page is unable to locate my CSS page even though they are both in the same folder. I am using Dreamweaver but coding from scratch. Below is my HTML code: < ...

htmlcss